<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>CSS Positioned Layout Module Level 3</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="exploring" name="csswg-work-status">
  <meta content="ED" name="w3c-status">
  <meta content="This module contains the features of CSS level&amp;nbsp;3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level&amp;nbsp;2 ([[!CSS2]]), which builds on CSS level&amp;nbsp;1 [[CSS1]]. The main extensions compared to level&amp;nbsp;2 are the ability to position elements based on CSS Region boxes, the ability to specify different containing blocks for elements and sticky positioning. <p>Other kinds of layout, such as tables, &quot;floating&quot; boxes, ruby annotations, grid layouts, columns and basic handling of normal &quot;flow&quot; content, are described in other modules. Also, the layout of text inside each line is defined elsewhere." name="abstract">
  <link href="../default.css" rel="stylesheet" type="text/css">
  <link href="../csslogo.ico" rel="shortcut icon" type="image/x-icon">
<style>
  body {
    background: url("https://www.w3.org/StyleSheets/TR/logo-ED") top left no-repeat;
  }
  </style>
  <link href="https://www.w3.org/TR/css-position-3/" rel="canonical">
<style type="text/css">
  .cb-example-table {
    border: 1px solid;
    border-collapse: collapse;
    font-size: smaller;
    text-align: center;
    margin: 0 2em;
  }
  .cb-example-table td, .cb-example-table th {
    border: 1px solid;
    padding: 0 3px;
  }
  code span, td span {
    white-space: nowrap;
  }
  .relationship-table {
    border: 1px solid;
    border-collapse: collapse;
    font-size: smaller;
    margin: 0 6em;
  }
  .relationship-table th {
    text-align: center;
    white-space:nowrap;
  }
  .relationship-table td, .relationship-table th {
    border: 1px solid;
    padding: 0 3px;
  }
  h2 dfn, h3 dfn {
    font: inherit;
  }

  table.lpr {
    border-collapse: collapse;
  }
  .lpr td, .lpr th {
    border: 1px solid;
    text-align: center;
  }
  .lpr col {
    background: rgb(221, 238, 255);
    border-right: 2px solid;
    font-weight: bold;
    padding: 0 5px;
  }
  .lpr div {
    font-weight: bold;
    -moz-transform: rotate(-90deg) translatex(-0.5em);
    -ms-transform: rotate(-90deg) translatex(-0.5em);
    -o-transform: rotate(-90deg) translatex(-0.5em);
    -webkit-transform: rotate(-90deg) translatex(-0.5em);
    transform: rotate(-90deg) translatex(-0.5em);
    width: 1.5em;
  }
  .lpr th:first-child {
    border: none;
    background: white;
  }
  .lpr tbody td:first-child {
    font-weight: normal;
  }
  .lpr thead td {
    background: rgb(238, 238, 238);
    font-weight: bold;
    padding: 0 5px;
    vertical-align: bottom;
    white-space: nowrap;
  }
  .lpr thead tr:nth-child(2) {
    border-bottom: 2px solid;
  }

  #abspos-auto ul { list-style-type: none; margin: 0; }
  #abspos-auto caption { caption-side: bottom; }

</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */

.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" width="72"> </a> </p>
   <h1 class="p-name no-ref" id="title">CSS Positioned Layout Module Level 3</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Editor’s Draft, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <details>
    <summary>Specification Metadata</summary>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
      <dd><a class="u-url" href="https://drafts.csswg.org/css-position/">https://drafts.csswg.org/css-position/</a>
      <dt>Latest published version:
      <dd><a href="https://www.w3.org/TR/css-position-3/">https://www.w3.org/TR/css-position-3/</a>
      <dt>Previous Versions:
      <dd><a href="https://www.w3.org/TR/2016/WD-css-position-3-20160517/" rel="prev">https://www.w3.org/TR/2016/WD-css-position-3-20160517/</a>
      <dd><a href="https://www.w3.org/TR/2015/WD-css3-positioning-20150203/" rel="prev">https://www.w3.org/TR/2015/WD-css3-positioning-20150203/</a>
      <dd><a href="https://www.w3.org/TR/2012/WD-css3-positioning-20120207/" rel="prev">https://www.w3.org/TR/2012/WD-css3-positioning-20120207/</a>
      <dt class="editor">Editors:
      <dd class="editor p-author h-card vcard" data-editor-id="49885"><a class="p-name fn u-email email" href="mailto:ratan@microsoft.com">Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)
      <dd class="editor p-author h-card vcard" data-editor-id="37934"><a class="p-name fn u-email email" href="mailto:arronei@microsoft.com">Arron Eicholz</a> (<span class="p-org org">Microsoft</span>)
      <dt>Suggest an Edit for this Spec:
      <dd><a href="https://github.com/w3c/csswg-drafts/blob/master/css-position-3/Overview.bs">GitHub Editor</a>
      <dt>Issue Tracking:
      <dd><a href="https://github.com/w3c/csswg-drafts/labels/css-position-3">GitHub Issues</a>
      <dt>Issues list:
      <dd><a href="http://wiki.csswg.org/spec/css-position/">in Wiki</a>
     </dl>
    </div>
   </details>
   <div data-fill-with="warning">
    <details class="annoying-warning" open>
     <summary>Not Ready For Implementation</summary>
     <p> This spec is not yet ready for implementation.
		It exists in this repository to record the ideas and promote discussion. </p>
     <p> Before attempting to implement this spec,
		please contact the CSSWG at www-style@w3.org. </p>
    </details>
   </div>
   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 <a href="https://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href="https://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href="https://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href="https://www.keio.ac.jp/">Keio</a>, <a href="https://ev.buaa.edu.cn/">Beihang</a>). W3C <a href="https://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>, <a href="https://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and <a href="https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document">permissive document license</a> rules apply. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This module contains the features of CSS level 3 relating to positioning and stacking of elements. It includes and extends the functionality of CSS level 2 (<a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>), which builds on CSS level 1 <a data-link-type="biblio" href="#biblio-css1">[CSS1]</a>. The main extensions compared to level 2 are the ability to position elements based on CSS Region boxes, the ability to specify different containing blocks for elements and sticky positioning. </p>
   <p>Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules. Also, the layout of text inside each line is defined elsewhere.</p>
    <a href="https://www.w3.org/TR/CSS/">CSS</a> is a language for describing the rendering of structured documents
(such as HTML and XML)
on screen, on paper, etc. 
  </div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This is a public copy of the editors’ draft.
	It is provided for discussion only and may change at any moment.
	Its publication here does not imply endorsement of its contents by W3C.
	Don’t cite this document other than as work in progress. </p>
   <p> <a href="https://github.com/w3c/csswg-drafts/issues">GitHub Issues</a> are preferred for discussion of this specification.
	When filing an issue, please put the text “css-position” in the title,
	preferably like this:
	“[css-position] <i data-lt>…summary of comment…</i>”.
	All issues and comments are <a href="https://lists.w3.org/Archives/Public/public-css-archive/">archived</a>,
	and there is also a <a href="https://lists.w3.org/Archives/Public/www-style/">historical archive</a>. </p>
   <p> This document was produced by the <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. </p>
   <p> This document was produced by a group operating under
	the <a href="https://www.w3.org/Consortium/Patent-Policy/">W3C Patent Policy</a>.
	W3C maintains a <a href="https://www.w3.org/2004/01/pp-impl/32061/status" rel="disclosure">public list of any patent disclosures</a> made in connection with the deliverables of the group;
	that page also includes instructions for disclosing a patent.
	An individual who has actual knowledge of a patent which the individual believes contains <a href="https://www.w3.org/Consortium/Patent-Policy/#def-essential">Essential Claim(s)</a> must disclose the information in accordance with <a href="https://www.w3.org/Consortium/Patent-Policy/#sec-Disclosure">section 6 of the W3C Patent Policy</a>. </p>
   <p> This document is governed by the <a href="https://www.w3.org/2019/Process-20190301/" id="w3c_process_revision">1 March 2019 W3C Process Document</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#intro"><span class="secno">1</span> <span class="content"> Introduction</span></a>
     <ol class="toc">
      <li><a href="#placement"><span class="secno">1.1</span> <span class="content"> Module Interactions</span></a>
      <li><a href="#values"><span class="secno">1.2</span> <span class="content"> Values</span></a>
     </ol>
    <li><a href="#vp"><span class="secno">2</span> <span class="content"> The <span>Viewport</span></span></a>
    <li>
     <a href="#cb"><span class="secno">3</span> <span class="content"> Containing Blocks</span></a>
     <ol class="toc">
      <li><a href="#def-cb"><span class="secno">3.1</span> <span class="content"> Definition of <span>containing block</span></span></a>
     </ol>
    <li><a href="#nf"><span class="secno">4</span> <span class="content"> <span>Normal Flow</span></span></a>
    <li><a href="#floats"><span class="secno">5</span> <span class="content"> <span>Floats</span></span></a>
    <li>
     <a href="#pos-sch"><span class="secno">6</span> <span class="content"> <span>Positioning schemes</span></span></a>
     <ol class="toc">
      <li><a href="#rel-pos"><span class="secno">6.1</span> <span class="content"> Relative positioning</span></a>
      <li><a href="#sticky-pos"><span class="secno">6.2</span> <span class="content"> Sticky positioning</span></a>
      <li><a href="#abs-pos"><span class="secno">6.3</span> <span class="content"> Absolute positioning</span></a>
      <li><a href="#fixed-pos"><span class="secno">6.4</span> <span class="content"> Fixed positioning</span></a>
      <li><a href="#position-property"><span class="secno">6.5</span> <span class="content"> Choosing a positioning scheme: <span class="property">position</span> property</span></a>
      <li><a href="#box-offsets-trbl"><span class="secno">6.6</span> <span class="content"> Box offsets: <span class="property">top</span>, <span class="property">right</span>, <span class="property">bottom</span>, <span class="property">left</span></span></a>
      <li><a href="#logical-box-offsets-beaso"><span class="secno">6.7</span> <span class="content"> Logical box insets: <span class="property">inset-before</span>, <span class="property">inset-end</span>, <span class="property">inset-after</span> and <span class="property">inset-start</span></span></a>
     </ol>
    <li>
     <a href="#position-root"><span class="secno">7</span> <span class="content"> Choosing a different containing block for positioning</span></a>
     <ol class="toc">
      <li><a href="#attachment-properties"><span class="secno">7.1</span> <span class="content"> Attachment properties: <span class="property">attachment-type</span>, <span class="property">attachment-top</span>, <span class="property">attachment-right</span>, <span class="property">attachment-bottom</span>, <span class="property">attachment-left</span>, and <span class="property">attachment</span></span></a>
     </ol>
    <li>
     <a href="#size-and-position-details"><span class="secno">8</span> <span class="content"> Sizing and positioning details</span></a>
     <ol class="toc">
      <li><a href="#abs-non-replaced-width"><span class="secno">8.1</span> <span class="content"> The width of absolute or fixed positioned, non-replaced elements</span></a>
      <li><a href="#abs-replaced-width"><span class="secno">8.2</span> <span class="content"> The width of absolute or fixed positioned, replaced elements</span></a>
      <li><a href="#abs-non-replaced-height"><span class="secno">8.3</span> <span class="content"> The height of absolute or fixed positioned, non-replaced elements</span></a>
      <li><a href="#abs-replaced-height"><span class="secno">8.4</span> <span class="content"> The height of absolute or fixed positioned, replaced elements</span></a>
      <li><a href="#root-height"><span class="secno">8.5</span> <span class="content"> Auto heights for block formatting context roots</span></a>
     </ol>
    <li><a href="#dis-pos-flo"><span class="secno">9</span> <span class="content"> Relationships between <span class="property">display</span>, <span class="property">position</span>, and <span class="property">float</span></span></a>
    <li>
     <a href="#comparison"><span class="secno">10</span> <span class="content"> Comparison of normal flow, floats, and positioning</span></a>
     <ol class="toc">
      <li><a href="#comp-normal-flow"><span class="secno">10.1</span> <span class="content"> Normal flow</span></a>
      <li><a href="#comp-relpos"><span class="secno">10.2</span> <span class="content"> Relative positioning</span></a>
      <li><a href="#comp-floating"><span class="secno">10.3</span> <span class="content"> Floating a box</span></a>
      <li><a href="#comp-abspos"><span class="secno">10.4</span> <span class="content"> Absolute positioning</span></a>
     </ol>
    <li><a href="#layered-presentation"><span class="secno">11</span> <span class="content"> Layered presentation</span></a>
    <li>
     <a href="#det-stacking-context"><span class="secno">12</span> <span class="content"> Detailed stacking context</span></a>
     <ol class="toc">
      <li><a href="#definitions-stack"><span class="secno">12.1</span> <span class="content"> Definitions</span></a>
      <li><a href="#painting-order"><span class="secno">12.2</span> <span class="content"> Painting order</span></a>
      <li><a href="#stacking-notes"><span class="secno">12.3</span> <span class="content"> Notes</span></a>
     </ol>
    <li><a href="#ack"><span class="secno">13</span> <span class="content"> Acknowledgments</span></a>
    <li>
     <a href="#changes"><span class="secno"></span> <span class="content">Changes</span></a>
     <ol class="toc">
      <li><a href="#changes-201502"><span class="secno"></span> <span class="content"> Changes since the 3 February 2015 WD</span></a>
     </ol>
    <li>
     <a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
     <ol class="toc">
      <li><a href="#document-conventions"><span class="secno"></span> <span class="content"> Document conventions</span></a>
      <li><a href="#conform-classes"><span class="secno"></span> <span class="content"> Conformance classes</span></a>
      <li>
       <a href="#conform-responsible"><span class="secno"></span> <span class="content"> Requirements for Responsible Implementation of CSS</span></a>
       <ol class="toc">
        <li><a href="#conform-partial"><span class="secno"></span> <span class="content"> Partial Implementations</span></a>
        <li><a href="#conform-future-proofing"><span class="secno"></span> <span class="content"> Implementations of Unstable and Proprietary Features</span></a>
        <li><a href="#conform-testing"><span class="secno"></span> <span class="content"> Implementations of CR-level Features</span></a>
       </ol>
     </ol>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#property-index"><span class="secno"></span> <span class="content">Property Index</span></a>
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content"> Introduction</span><a class="self-link" href="#intro"></a></h2>
    <em>This section is not normative.</em> 
   <p>CSS assumes the document layout is modeled as a tree of elements. The unique
  element that has no parent is called the root element. This module describes
  how any of the elements from the tree of elements can be arranged independent
  of document order (i.e. taken out of "flow"). With a positioned element the
  element may be placed anywhere within the content not specifically respecting
  the tree of elements order.</p>
   <p>In <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>, the visual formatting model explained how each element in the
  document tree generates zero or more boxes according to the box model. This
  module further explains and extends the positioning scheme. The layout of
  these boxes is governed by:</p>
   <ul>
    <li> <a href="https://www.w3.org/TR/CSS2/box.html#box-dimensions">box dimensions</a> and <a href="https://www.w3.org/TR/CSS2/visuren.html#box-gen">type</a>. 
    <li> positioning scheme (<a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow">normal flow</a>, float, and absolute positioning). 
    <li> relationships between elements in the <a href="https://www.w3.org/TR/CSS2/conform.html#doctree">document tree</a>. 
    <li> external information (e.g., viewport size, intrinsic dimensions of images, etc.). 
   </ul>
   <p>The properties defined in this module apply to both continuous media and paged
  media.</p>
   <h3 class="heading settled" data-level="1.1" id="placement"><span class="secno">1.1. </span><span class="content"> Module Interactions</span><a class="self-link" href="#placement"></a></h3>
   <p>This module replaced and extends the positioning scheme features defined in <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> sections:</p>
   <ul>
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#viewport">9.1.1 The viewport</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#containing-block">9.1.2 Containing blocks</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#positioning-scheme">9.3 Positioning schemes</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#relative-positioning">9.4.3 Relative positioning</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#absolute-positioning">9.6 Absolute positioning</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo">9.7 Relationships between display, position, and float</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#comparison">9.8 Comparison of normal flow, floats, and absolute positioning</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visuren.html#layers">9.9 Layered presentation</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#containing-block-details">10.1 Definition of "containing block"</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-width">10.3.7 Absolutely positioned, non-replaced elements</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-width">10.3.8 Absolutely positioned, replaced elements</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-non-replaced-height">10.6.4 Absolutely positioned, non-replaced elements</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#abs-replaced-height">10.6.5 Absolutely positioned replaced elements</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/visudet.html#root-height">10.6.7 Auto heights for block formatting context roots</a> 
    <li> <a href="https://www.w3.org/TR/CSS2/zindex.html">Appendix E. Elaborate description of Stacking Contexts</a> 
   </ul>
   <h3 class="heading settled" data-level="1.2" id="values"><span class="secno">1.2. </span><span class="content"> Values</span><a class="self-link" href="#values"></a></h3>
   <p>This specification follows the <a href="https://www.w3.org/TR/CSS21/about.html#property-defs">CSS property definition conventions</a> from <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a>.
  Value types not defined in this specification are defined in CSS Values &amp; Units <a data-link-type="biblio" href="#biblio-css-values-3">[CSS-VALUES-3]</a>.
  Other CSS modules may expand the definitions of these value types.</p>
   <p>In addition to the property-specific values listed in their definitions,
  all properties defined in this specification
  also accept the <a data-link-type="dfn" href="https://drafts.csswg.org/css-values-4/#css-wide-keywords" id="ref-for-css-wide-keywords">CSS-wide keywords</a> keywords as their property value.
  For readability they have not been repeated explicitly.</p>
   <h2 class="heading settled" data-level="2" id="vp"><span class="secno">2. </span><span class="content"> The <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="viewport" data-noexport id="viewport">Viewport</dfn></span><a class="self-link" href="#vp"></a></h2>
   <p>User agents for <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a> generally offer users a viewport (a window or other
    viewing area on the screen) through which users consult a document. User
    agents may change the document’s layout when the viewport is resized
    (see the <span>initial containing block</span>).</p>
   <p>When the viewport is smaller than the area of the canvas on which the document
    is rendered, the user agent may offer a scrolling mechanism. There is at most
    one viewport per <a href="https://www.w3.org/TR/CSS2/intro.html#canvas">canvas</a>,
    but user agents may render to more than one canvas (i.e., provide different
    views of the same document).</p>
   <h2 class="heading settled" data-level="3" id="cb"><span class="secno">3. </span><span class="content"> Containing Blocks</span><a class="self-link" href="#cb"></a></h2>
   <p>In CSS, many box positions and sizes are calculated with respect to the edges
  of a rectangular box called a containing block. In general, generated boxes
  act as containing blocks for descendant boxes; we say that a box "establishes"
  the containing block for its descendants. The phrase "a box’s containing
  block" means "the containing block in which the box lives," not the one it
  generates.</p>
   <p>Each box is given a position with respect to its containing block, but it is
  not confined by this containing block; it may <a href="https://www.w3.org/TR/CSS2/visufx.html#overflow">overflow</a>.</p>
   <h3 class="heading settled" data-level="3.1" id="def-cb"><span class="secno">3.1. </span><span class="content"> Definition of <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="containing-block">containing block</dfn></span><a class="self-link" href="#def-cb"></a></h3>
   <p>The position and size of an element’s box(es) are sometimes computed relative
  to a certain rectangle, called the containing block of the element. The containing
  block of a <a class="css" data-link-type="maybe" href="#valdef-position-static" id="ref-for-valdef-position-static">static</a> or <a class="css" data-link-type="maybe" href="#valdef-position-relative" id="ref-for-valdef-position-relative">relative</a> element is defined
  in the Box Model <a data-link-type="biblio" href="#biblio-css3box">[CSS3BOX]</a>. The containing block of a <a class="css" data-link-type="maybe" href="#valdef-position-sticky" id="ref-for-valdef-position-sticky">sticky</a> element is the same as for a <span class="css" id="ref-for-valdef-position-relative①">relative</span> element. For <a class="css" data-link-type="maybe" href="#valdef-position-fixed" id="ref-for-valdef-position-fixed">fixed</a> and <a class="css" data-link-type="maybe" href="#valdef-position-absolute" id="ref-for-valdef-position-absolute">absolute</a>, it is defined as follows:</p>
   <ol>
    <li> If the element has <a class="css" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position">position: fixed</a>, the containing block is established by the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport">viewport</a> in the case of continuous media or the page area in
    the case of paged media. 
    <li>
      If the element has <a class="css" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①">position: absolute</a>,
    the containing block is established by the nearest ancestor with a <span class="property" id="ref-for-propdef-position②">position</span> other than <a class="css" data-link-type="maybe" href="#valdef-position-static" id="ref-for-valdef-position-static①">static</a>, in the following way: 
     <ol>
      <li> In the case that the ancestor is block-level, the containing block is formed
      by the padding edge of the ancestor. 
      <li>
        In the case that the ancestor is inline-level, the containing block depends
      on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction</a> property of the ancestor: 
       <ol>
        <li> If the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①">direction</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr">ltr</a>, the top and left of the containing
          block are the top and left content edges of the first box generated
          by the ancestor, and the bottom and right are the bottom and right
          content edges of the last box of the ancestor. 
        <li>
          If the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②">direction</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl">rtl</a>, the top and right are the
        top and right edges of the first box generated by the ancestor, and
        the bottom and left are the bottom and left content edges of the
        last box of the ancestor. 
         <p class="note" role="note"> Note, in some cases when a line wraps it may seem as if the left
          and right positions are swapped. </p>
       </ol>
     </ol>
    <li> If there is no such ancestor, the containing block is the <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#initial-containing-block" id="ref-for-initial-containing-block">initial
    containing block</a>. 
   </ol>
   <p>In paged media, an absolutely positioned element is positioned relative to its
  containing block ignoring any page breaks (as if the document were continuous). The
  element may subsequently be broken over several pages.</p>
   <p>For absolutely positioned content that resolves to a position on a page other than the
  page being laid out (the current page), or resolves to a position on the current page
  which has already been rendered for printing, printers may place the content:</p>
   <ul>
    <li>on the current page,
    <li>on a subsequent page, or
    <li>may omit it altogether.
   </ul>
   <p class="note" role="note"> Note, a block-level element that is split over several pages may have a different width
  on each page and that there may be device-specific limits. </p>
   <div class="example" id="example-7f074eae">
    <a class="self-link" href="#example-7f074eae"></a> 
    <p>With no positioning, the containing blocks (C.B.) in the following document:</p>
<pre><code class="html">&lt;!DOCTYPE html>
&lt;html>
    &lt;head>
        &lt;title>Illustration of containing blocks&lt;/title>
    &lt;/head>
    &lt;body id="body">
        &lt;div id="div1">
        &lt;p id="p1">This is text in the first paragraph...&lt;/p>
        &lt;p id="p2">This is text &lt;em id="em1"> in the
        &lt;strong id="strong1">second&lt;/strong> paragraph.&lt;/em>&lt;/p>
        &lt;/div>
    &lt;/body>
&lt;/html>
</code></pre>
    <p>are established as follows:</p>
    <table class="cb-example-table">
     <tbody>
      <tr>
       <th>For box generated by 
       <th>C.B. is established by
      <tr>
       <td>html
       <td>initial C.B. (UA-dependent)
      <tr>
       <td>body
       <td>html
      <tr>
       <td>div1
       <td>body
      <tr>
       <td>p1
       <td>div1
      <tr>
       <td>p2
       <td>div1
      <tr>
       <td>em1
       <td>p2
      <tr>
       <td>strong1
       <td>p2
    </table>
    <p>If we position "div1":</p>
<pre><code class="css">#div1 { position: absolute; left: 50px; top: 50px }
</code></pre>
    <p>its containing block is no longer "body"; it becomes the <span>initial containing block</span> (since there are no other positioned ancestor boxes).</p>
    <p>If we position "em1" as well:</p>
<pre><code class="css">#div1 { position: absolute; left: 50px; top: 50px }
#em1  { position: absolute; left: 100px; top: 100px }
</code></pre>
    <p>the table of containing blocks becomes:</p>
    <table class="cb-example-table">
     <tbody>
      <tr>
       <th>For box generated by
       <th>C.B. is established by
      <tr>
       <td>html
       <td>initial C.B. (UA-dependent)
      <tr>
       <td>body
       <td>html
      <tr>
       <td>div1
       <td>initial C.B.
      <tr>
       <td>p1
       <td>div1
      <tr>
       <td>p2
       <td>div1
      <tr>
       <td>em1
       <td>div1
      <tr>
       <td>strong1
       <td>em1
    </table>
    <p>By positioning "em1", its containing block becomes the nearest positioned ancestor box
  (i.e., that generated by "div1").</p>
   </div>
   <h2 class="heading settled" data-level="4" id="nf"><span class="secno">4. </span><span class="content"> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="normal-flow">Normal Flow</dfn></span><a class="self-link" href="#nf"></a></h2>
   <p>Boxes in the normal flow belong to a formatting context, which may be block or
  inline, but not both simultaneously. See the CSS Basic Box Model module <a data-link-type="biblio" href="#biblio-css3box">[CSS3BOX]</a> for further details about <a href="https://www.w3.org/TR/CSS2/visuren.html#normal-flow">normal flow</a>.</p>
   <h2 class="heading settled" data-level="5" id="floats"><span class="secno">5. </span><span class="content"> <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="float|floated box|floating box" data-noexport id="float">Floats</dfn></span><a class="self-link" href="#floats"></a></h2>
   <p>A float is a box that is positioned within content, often left or right on the
  current line. The most interesting characteristic of a float (or "floated" or
  "floating" box) is that inline-level content may flow along its side (or be
  prohibited from doing so by the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear">clear</a> property) or around the floated box.
  See the CSS 2.1 <a data-link-type="biblio" href="#biblio-css2">[CSS2]</a> for details
  about <a href="https://www.w3.org/TR/CSS2/visuren.html#floats">floating boxes</a>.</p>
   <h2 class="heading settled" data-level="6" id="pos-sch"><span class="secno">6. </span><span class="content"> <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="positioning-schemes">Positioning schemes</dfn></span><a class="self-link" href="#pos-sch"></a></h2>
   <p>In CSS, a box may be laid out according to three positioning schemes:</p>
   <ol>
    <li> Normal flow<br> In CSS, <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①">normal flow</a> includes <a href="https://www.w3.org/TR/CSS2/visuren.html#block-formatting">block formatting</a> of block-level boxes, <a href="https://www.w3.org/TR/CSS2/visuren.html#inline-formatting">inline formatting</a> of inline-level boxes,
    and <a data-link-type="dfn" href="https://drafts.csswg.org/css2/visuren.html#x34" id="ref-for-x34">relative</a> and <a data-link-type="dfn" href="#sticky-position" id="ref-for-sticky-position">sticky</a> positioning of block-level and inline-level boxes. 
    <li> Floats<br> In the <a data-link-type="dfn" href="#float" id="ref-for-float">float</a> model, a box is first laid out according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow②">normal flow</a>, then taken
    out of the flow and positioned, typically to the left or right. Content may flow
    along the side of a <span id="ref-for-float①">float</span>. 
    <li> Absolute positioning<br> In the absolute positioning model, a box is removed from the <span>normal
    flow</span> entirely (it has no impact on later siblings) and assigned a
     position with respect to a <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block">containing block</a>. 
   </ol>
   <p>An element is called <em>out-of-flow</em> if it is <a data-link-type="dfn" href="#float" id="ref-for-float②">floated</a>, absolutely positioned, or is the root element. An element is called <em>in-flow</em> if it is not out-of-flow. The <em>flow of an element</em> A is the set consisting of A and all in-flow elements whose nearest
  out-of-flow ancestor is A.</p>
   <h3 class="heading settled" data-level="6.1" id="rel-pos"><span class="secno">6.1. </span><span class="content"> Relative positioning</span><a class="self-link" href="#rel-pos"></a></h3>
   <p>Once a box has been laid out according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow③">normal flow</a> or <a data-link-type="dfn" href="#float" id="ref-for-float③">floated</a>, it may be offset relative to this position.
  This is called <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="relative position|relatively position|relpos" id="relative-position">relative positioning</dfn>. Offsetting a box (B1) in this way has no
  effect on the box (B2) that follows: B2 is given a position as if B1 were not
  offset and B2 is not re-positioned after B1’s offset is applied. This
  implies that relative positioning may cause boxes to overlap. However, if
  relative positioning causes an <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow">overflow: auto</a> or <span class="css" id="ref-for-propdef-overflow①">overflow: scroll</span> box to
  have overflow, the user agent must allow the user to access this content (at
  its offset position), which, through the creation of a scrolling mechanism,
  may affect layout.</p>
   <p>A relatively positioned box keeps its <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow④">normal flow</a> size, including
  line breaks and the space originally reserved for it.</p>
   <p>A relatively positioned box establishes a new <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①">containing block</a> for
  absolutely positioned descendants. (This is a common use of relatively positioned
  boxes.) The section on <span id="ref-for-containing-block②">containing blocks</span> explains when a relatively positioned box establishes a new <span id="ref-for-containing-block③">containing block</span>.</p>
   <p>For relatively positioned elements, <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left">left</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right">right</a> move the box(es) horizontally,
  without changing their size. <span class="property" id="ref-for-propdef-left①">Left</span> moves the boxes to the right, and <span class="property" id="ref-for-propdef-right①">right</span> moves
  them to the left. Since boxes are not split or stretched as a result of <span class="property" id="ref-for-propdef-left②">left</span> or <span class="property" id="ref-for-propdef-right②">right</span>, the used values are always: left = -right.</p>
   <p>If both <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③">left</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③">right</a> are <span class="css">auto</span> (their initial values), the used values
  are <span class="css">0</span> (i.e., the boxes stay in their original position).</p>
   <p>If <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left④">left</a> is <span class="css">auto</span>, its used value is minus the value of <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right④">right</a> (i.e., the
  boxes move to the left by the value of <span class="property" id="ref-for-propdef-right⑤">right</span>).</p>
   <p>If <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right⑥">right</a> is specified as <span class="css">auto</span>, its used value is minus the value of <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left⑤">left</a>.</p>
   <p>If neither <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left⑥">left</a> nor <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right⑦">right</a> is <span class="css">auto</span>, the position is over-constrained, and
  one of them has to be ignored. If the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction③">direction</a> property of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block④">containing
  block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr①">ltr</a>, the value of <span class="property" id="ref-for-propdef-left⑦">left</span> wins and <span class="property" id="ref-for-propdef-right⑧">right</span> becomes -<span class="property" id="ref-for-propdef-left⑧">left</span>.
  If <span class="property" id="ref-for-propdef-direction④">direction</span> of the containing block is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl①">rtl</a>, <span class="property" id="ref-for-propdef-right⑨">right</span> wins and <span class="property" id="ref-for-propdef-left⑨">left</span> is
  ignored.</p>
   <div class="example" id="example-db1cdd72">
    <a class="self-link" href="#example-db1cdd72"></a> 
    <p>The following three rules are equivalent:</p>
<pre><code class="css">div.a8 { position: relative; direction: ltr; left: -1em; right: auto }
div.a8 { position: relative; direction: ltr; left: auto; right: 1em }
div.a8 { position: relative; direction: ltr; left: -1em; right: 5em }
</code></pre>
   </div>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom">bottom</a> properties move relatively positioned element(s) up or
  down without changing their size. <span class="property" id="ref-for-propdef-top①">Top</span> moves the boxes down, and <span class="property" id="ref-for-propdef-bottom①">bottom</span> moves
  them up. Since boxes are not split or stretched as a result of <span class="property" id="ref-for-propdef-top②">top</span> or <span class="property" id="ref-for-propdef-bottom②">bottom</span>,
  the used values are always: top = -bottom.</p>
   <p>If <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom③">bottom</a> are <span class="css">auto</span>, their used values are both <span class="css">0</span>.</p>
   <p>If one of them, <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top④">top</a> or <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom④">bottom</a>, is <span class="css">auto</span>, the <span class="css">auto</span> value becomes the
  negative of the other.</p>
   <p>If neither <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top⑤">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom⑤">bottom</a> is <span class="css">auto</span>, <span class="property" id="ref-for-propdef-bottom⑥">bottom</span> is ignored (i.e., the used
  value of <span class="property" id="ref-for-propdef-bottom⑦">bottom</span> will be minus the value of <span class="property" id="ref-for-propdef-top⑥">top</span>).</p>
   <p class="note" role="note"> Note, Although relative positioning could be used as a form of superscripting
    and subscripting, the line height is not automatically adjusted to take the
    positioning into consideration. See the description of <a href="https://www.w3.org/TR/CSS2/visudet.html#line-height">line height calculations</a> for more
    information. </p>
   <p>Examples of relative positioning are provided in the section comparing <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow⑤">normal
  flow</a>, <a data-link-type="dfn" href="#float" id="ref-for-float④">floats</a>, and absolute positioning.</p>
   <h3 class="heading settled" data-level="6.2" id="sticky-pos"><span class="secno">6.2. </span><span class="content"> Sticky positioning</span><a class="self-link" href="#sticky-pos"></a></h3>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-export data-lt="sticky position|stickily position|stickypos" id="sticky-position">stickily positioned</dfn> box is positioned similarly to a <a data-link-type="dfn" href="#relative-position" id="ref-for-relative-position">relatively
  positioned</a> box, but the offset is computed with reference to the nearest
  ancestor with a <a data-link-type="dfn" href="https://drafts.csswg.org/cssom-view-1/#scrolling-box" id="ref-for-scrolling-box">scrolling box</a>, or the viewport if no ancestor has
  a <span id="ref-for-scrolling-box①">scrolling box</span>.</p>
   <p>Specifically, once a box has been laid out according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow⑥">normal flow</a> or <a data-link-type="dfn" href="#float" id="ref-for-float⑤">floated</a>, its sticky offset is computed as described
  below. Offsetting a box (B1) in this way has no effect on the box (B2) that
  follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned
  after B1’s offset is applied. This implies that sticky positioning may cause
  boxes to overlap. However, if sticky positioning causes an <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow" id="ref-for-propdef-overflow②">overflow: auto</a> or <span class="css" id="ref-for-propdef-overflow③">overflow: scroll</span> box to have overflow, the user agent must allow the user to
  access this content (at its offset position), which, through the creation of a
  scrolling mechanism, may affect layout.</p>
   <p>A stickily positioned box keeps its <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow⑦">normal flow</a> size, including  line
  breaks and the space originally reserved for it.</p>
   <p>A stickily positioned box establishes a new <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block⑤">containing block</a> for
  absolutely positioned descendants, just as relative positioning does. The section
  on <span id="ref-for-containing-block⑥">containing blocks</span> explains when a
  stickily positioned box establishes a new <span id="ref-for-containing-block⑦">containing block</span>.</p>
   <p>For stickily positioned elements, <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①⓪">left</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①⓪">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top⑦">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom⑧">bottom</a> are
  offsets from the respective edges of its flow box which are used to constrain
  the element’s offset. Percentage values of <span class="property" id="ref-for-propdef-left①①">left</span> and <span class="property" id="ref-for-propdef-right①①">right</span> refer to the
  width of its flow box; percentage values of <span class="property" id="ref-for-propdef-top⑧">top</span> and <span class="property" id="ref-for-propdef-bottom⑨">bottom</span> refer to the
  height of its flow box.</p>
   <p class="issue" id="issue-86601ab4"><a class="self-link" href="#issue-86601ab4"></a> Describe which element font-size-relative units are resolved against </p>
   <p>The offset of a stickily positioned box is computed as follows:</p>
   <ol>
    <li>
      A rectangle is computed relative to the containing block of the stickily
  positioned element, by insetting its flow box rectangle on each side by offsets
  computed from the <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①②">left</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①②">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top⑨">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①⓪">bottom</a> properties of the stickily
  positioned element. 
     <p class="issue" id="issue-6be9cee7"><a class="self-link" href="#issue-6be9cee7"></a> Say what happens if this rectangle is empty </p>
    <li> The intersection is taken between the resulting rectangle, and the containing
  block of the stickily positioned element. The result, termed the the <em>sticky-constraint rectangle</em>, is a rectangle used to constrain the
  location of the stickily positioned element. 
    <li> If the stickily positioned element’s <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①⓪">top</a> style is not <span class="css">auto</span>, and the stickily
  positioned element projects above the top of the <em>sticky-constraint
  rectangle</em>, the stickily positioned element is moved down until it is fully
  contained in the <em>sticky-constraint rectangle</em>. 
    <li> If the stickily positioned element’s <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①①">bottom</a> style is not <span class="css">auto</span>, and the stickily
  positioned element projects below the bottom of the <em>sticky-constraint
  rectangle</em>, the stickily positioned element is moved up until it is fully
  contained in the <em>sticky-constraint rectangle</em>. 
    <li> If the stickily positioned element’s <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①③">left</a> style is not <span class="css">auto</span>, and the stickily
  positioned element projects outside the left of the <em>sticky-constraint
  rectangle</em>, the stickily positioned element is moved right until it is fully
  contained in the <em>sticky-constraint rectangle</em>. 
    <li> If the stickily positioned element’s <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①③">right</a> style is not <span class="css">auto</span>, and the stickily
  positioned element projects outside the right of the <em>sticky-constraint
  rectangle</em>, the stickily positioned element is moved left until it is fully
  contained in the <em>sticky-constraint rectangle</em>. 
   </ol>
   <p>When computing containment of the stickily positioned element within its
  containing block, margins on the stickily positioned element are taken into
  account.</p>
   <p class="issue" id="issue-09e98f99"><a class="self-link" href="#issue-09e98f99"></a> Say what happens if it already overflows the containing block </p>
   <p class="issue" id="issue-sticky-margin-collapsing"><a class="self-link" href="#issue-sticky-margin-collapsing"></a> Do margins collapse between the stickily positioned element and its containing
    block element?
    More generally, what margin is this referring to?
    Does it involve collapsing between the sticky element and
    its descendants, siblings, and/or ancestors? </p>
   <p>Intersection between the stickily positioned element and the bottom of the <em>sticky-constraint rectangle</em> limits movement in any direction, so the
  offset never pushes the stickily positioned element outside of its containing
  block. However, when the element is free to move within its containing block
  as the page is scrolled, it appears to be pinned to the relevant flow root
  edges, similarly to a fixed position element.</p>
   <p class="note" role="note"> Note that a stickily positioned element with non-auto <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①①">top</a> style and auto <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①②">bottom</a> style will only ever be pushed down by sticky positioning; it will
    never be offset upwards. </p>
   <p class="note" role="note"> Multiple stickily positioned elements in the same container are offset
    independently. Sticky position offsets may cause them to overlap. </p>
   <p class="issue" id="issue-d0f08323"><a class="self-link" href="#issue-d0f08323"></a> Does the margin on the stickily positioned element affect its distance from
    the flow root edge? </p>
   <p class="issue" id="issue-633057ae"><a class="self-link" href="#issue-633057ae"></a> Sticky positioning should really be defined in terms of the nearest scrollable
    ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM
    View refers to "scrolling boxes." CSS Overflow has yet to pull in the relevant
    text from CSS Box, and CSS Box has an old, confusing definition of "flow root"
    which is almost (but probably not quite) what we want here. This spec refers
    to "flow root," since that’s the closest thing currently specced somewhere,
    but this is not optimal. </p>
   <h3 class="heading settled" data-level="6.3" id="abs-pos"><span class="secno">6.3. </span><span class="content"> Absolute positioning</span><a class="self-link" href="#abs-pos"></a></h3>
   <p>In the absolute positioning model, a box is explicitly offset with respect to
  its <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block⑧">containing block</a>. It is removed from the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow⑧">normal flow</a> entirely
  (it has no impact on later siblings). An absolutely positioned box establishes
  a new <span id="ref-for-containing-block⑨">containing block</span> for normal flow children and absolutely (but not
  fixed) positioned descendants. However, the contents of an absolutely
  positioned element do not flow around any other boxes. They may obscure the
  contents of another box (or be obscured themselves), depending on the stack
  levels of the overlapping boxes.</p>
   <p>References in this specification to an absolutely positioned element (or its
  box) imply that the element’s <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position③">position</a> property has the value <a class="css" data-link-type="maybe" href="#valdef-position-absolute" id="ref-for-valdef-position-absolute①">absolute</a> or <a class="css" data-link-type="maybe" href="#valdef-position-fixed" id="ref-for-valdef-position-fixed①">fixed</a>.</p>
   <h3 class="heading settled" data-level="6.4" id="fixed-pos"><span class="secno">6.4. </span><span class="content"> Fixed positioning</span><a class="self-link" href="#fixed-pos"></a></h3>
   <p>Fixed positioning is similar to absolute positioning. The only difference is
  that for a fixed positioned box, the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⓪">containing block</a> is established
  by the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport①">viewport</a>. For <a href="https://www.w3.org/TR/CSS2/media.html#continuous-media-group">continuous media</a>,
  fixed boxes do not move when the document is scrolled. In this respect, they are similar
  to <a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">fixed background images</a>.
  For <a href="https://www.w3.org/TR/CSS2/media.html#paged-media-group">paged
  media</a>, boxes with fixed positions are repeated on every page. This is useful
  for placing, for instance, a signature at the bottom of each page. Boxes with
  fixed position that are larger than the page area are clipped. Parts of the
  fixed position box that are not visible in the <span>initial containing
  block</span> will not print.</p>
   <div class="example" id="example-d19e4e00">
    <a class="self-link" href="#example-d19e4e00"></a> 
    <p>Authors may use fixed positioning to create the following presentation:</p>
    <figure>
      <img alt="Example of frame layout" src="images/frame.png"> 
     <figcaption> A page layout with a static header and footer at the top and bottom,
      a sidebar to one side,
      and main content filling the remaining center space. </figcaption>
    </figure>
    <p>This might be achieved with the following HTML document and style rules:</p>
<pre class="lang-html highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>html</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>head</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>title</c-><c- p>></c->A frame document with CSS<c- p>&lt;/</c-><c- f>title</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>style</c-> <c- e>type</c-><c- o>=</c-><c- s>"text/css"</c-> <c- e>media</c-><c- o>=</c-><c- s>"screen"</c-><c- p>></c->
      <c- f>body</c-> <c- p>{</c-> <c- k>height</c-><c- p>:</c-> <c- mf>8.5</c-><c- b>in</c-> <c- p>}</c-> <c- c>/* Required for percentage heights below */</c->
      <c- p>#</c-><c- nn>header</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>fixed</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>15</c-><c- b>%</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
      <c- p>}</c->
      <c- p>#</c-><c- nn>sidebar</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>fixed</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>10</c-><c- b>em</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>15</c-><c- b>%</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
      <c- p>}</c->
      <c- p>#</c-><c- nn>main</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>fixed</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- mi>15</c-><c- b>%</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>10</c-><c- b>em</c-><c- p>;</c->
      <c- p>}</c->
      <c- p>#</c-><c- nn>footer</c-> <c- p>{</c->
        <c- k>position</c-><c- p>:</c-> <c- kc>fixed</c-><c- p>;</c->
        <c- k>width</c-><c- p>:</c-> <c- mi>100</c-><c- b>%</c-><c- p>;</c->
        <c- k>height</c-><c- p>:</c-> <c- mi>100</c-><c- b>px</c-><c- p>;</c->
        <c- k>top</c-><c- p>:</c-> <c- kc>auto</c-><c- p>;</c->
        <c- k>right</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>bottom</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
        <c- k>left</c-><c- p>:</c-> <c- mi>0</c-><c- p>;</c->
      <c- p>}</c->
    <c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
  <c- p>&lt;/</c-><c- f>head</c-><c- p>></c->
  <c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"header"</c-><c- p>></c-> ...  <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"sidebar"</c-><c- p>></c-> ...  <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"main"</c-><c- p>></c-> ...  <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"footer"</c-><c- p>></c-> ...  <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
  <c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>></c->
</pre>
   </div>
   <h3 class="heading settled" data-level="6.5" id="position-property"><span class="secno">6.5. </span><span class="content"> Choosing a positioning scheme: <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position④">position</a> property</span><a class="self-link" href="#position-property"></a></h3>
   <p>The <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position⑤">position</a> property determines which of the positioning algorithms is used to
  calculate the position of a box.</p>
   <table class="def propdef" data-link-for-hint="position">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-position">position</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">static <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one">|</a> relative <span id="ref-for-comb-one①">|</span> absolute <span id="ref-for-comb-one②">|</span> sticky <span id="ref-for-comb-one③">|</span> fixed 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>static 
     <tr>
      <th>Applies to:
      <td>all elements except table-column-group and table-column 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>specified keyword 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>discrete 
   </table>
   <p>The values of this property have the following meanings:</p>
   <dl>
    <dt><dfn class="dfn-paneled css" data-dfn-for="position" data-dfn-type="value" data-export id="valdef-position-static">static</dfn>
    <dd> The box is a normal box, laid out according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow⑨">normal flow</a>. The <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①②">top</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①④">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①③">bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①④">left</a> properties do not apply. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="position" data-dfn-type="value" data-export id="valdef-position-relative">relative</dfn>
    <dd>
      The box’s position is calculated according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⓪">normal flow</a> (this
    is called the position in <span id="ref-for-normal-flow①①">normal flow</span>). Then the box is offset relative
    to its normal position and in all cases, including table elements, does not affect
    the position of any following boxes. When a box B is relatively positioned, the
    position of the following box is calculated as though B were not offset. The effect
    of <a class="css" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position⑥">position: relative</a> on table elements is defined as follows: 
     <ul>
      <li> table-row-group, table-header-group, table-footer-group and table-row offset
      relative to its normal position within the table. If table-cells span
      multiple rows, only the cells originating in the <a data-link-type="dfn" href="#relative-position" id="ref-for-relative-position①">relative positioned</a> row are
      offset. 
      <li> table-column-group, table-column do not offset the respective column and has
      no visual affect when <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position⑦">position</a>: <a class="css" data-link-type="maybe" href="#valdef-position-relative" id="ref-for-valdef-position-relative②">relative</a> is applied. 
      <li> table-caption and table-cell offset relative to its normal position within
      the table. If a table cell spans multiple columns or rows the full spanned
      cell is offset. 
     </ul>
    <dt><dfn class="dfn-paneled css" data-dfn-for="position" data-dfn-type="value" data-export id="valdef-position-absolute">absolute</dfn>
    <dd> The box’s position (and possibly size) is specified with the <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①③">top</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①⑤">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①④">bottom</a>, and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①⑤">left</a> properties. These properties specify offsets with respect
    to the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①①">containing block</a>. Absolutely positioned boxes
    are taken out of the normal flow. This means they have no impact on the layout
    of later siblings. Though absolutely positioned boxes may have margins, those
    margins do not <a href="https://www.w3.org/TR/CSS2/box.html#collapsing-margins"> collapse</a> with any other margins. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="position" data-dfn-type="value" data-export id="valdef-position-sticky">sticky</dfn>
    <dd> The box’s position is calculated according to the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①②">normal flow</a> (this is called the position in <span id="ref-for-normal-flow①③">normal flow</span>). Then the box is offset
    relative to its flow root and containing block and in all cases, including
    table elements, does not affect the position of any following boxes. When a
    box B is stickily positioned, the position of the following box is calculated
    as though B were not offset. The effect of <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position⑧">position</a>: <a class="css" data-link-type="maybe" href="#valdef-position-sticky" id="ref-for-valdef-position-sticky①">sticky</a> on table
    elements is the same as for <span class="property" id="ref-for-propdef-position⑨">position</span>: <a class="css" data-link-type="maybe" href="#valdef-position-relative" id="ref-for-valdef-position-relative③">relative</a> 
    <dt><dfn class="dfn-paneled css" data-dfn-for="position" data-dfn-type="value" data-export id="valdef-position-fixed">fixed</dfn>
    <dd>
      The box’s position is calculated according to the "absolute" model, but
    in addition, the box is fixed with respect to some reference. As with the
    "absolute" model, the box’s margins do not collapse with any other margins.
    In the case of handheld, projection, screen, tty, and tv media types, the box
    is fixed with respect to the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport②">viewport</a> and does not move when scrolled.
    In the case of the print media type, the box is rendered on every page, and
    is fixed with respect to the page box, even if the page is seen through a <span id="ref-for-viewport③">viewport</span> (in the case of a print-preview, for example). For other media
    types, the presentation is undefined. Authors may wish to specify <a class="css" data-link-type="maybe" href="#valdef-position-fixed" id="ref-for-valdef-position-fixed②">fixed</a> in a media-dependent way. For instance, an author may want a box to remain at
    the top of the <span id="ref-for-viewport④">viewport</span> on the screen, but not at the top of each printed
    page. The two specifications may be separated by using an <a href="https://www.w3.org/TR/CSS2/media.html#at-media-rule">'@media'</a> rule, as in: 
     <div class="example" id="example-c2d4a79f">
      <a class="self-link" href="#example-c2d4a79f"></a> 
<pre><code class="css">@media screen {
    h1#first { position: fixed }
}
@media print {
    h1#first { position: static }
}
</code></pre>
     </div>
      User agents must not paginate the content of fixed boxes. 
     <p class="note" role="note"> Note that user agents may print invisible content in other ways. See <a href="https://www.w3.org/TR/CSS2/page.html#outside-page-box">"Content outside the page box"</a>. </p>
   </dl>
   <p>In previous versions of CSS user agents may treat position <a class="css" data-link-type="maybe" href="#valdef-position-fixed" id="ref-for-valdef-position-fixed③">fixed</a> as <a class="css" data-link-type="maybe" href="#valdef-position-static" id="ref-for-valdef-position-static②">static</a> on the root element. This specification removes that option and it is now required
  that newer user agents treat <span class="css" id="ref-for-valdef-position-fixed④">fixed</span> value on the root element as defined for
  all other elements.</p>
   <h3 class="heading settled" data-level="6.6" id="box-offsets-trbl"><span class="secno">6.6. </span><span class="content"> Box offsets: <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①④">top</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①⑥">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①⑤">bottom</a>, <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①⑥">left</a></span><a class="self-link" href="#box-offsets-trbl"></a></h3>
   <p>An element is said to be <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-range-bp-position" id="ref-for-concept-range-bp-position">positioned</a> if its <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①⓪">position</a> property has a value other than <a class="css" data-link-type="maybe" href="#valdef-position-static" id="ref-for-valdef-position-static③">static</a>.
  Positioned elements generate positioned boxes, and may be laid out according
  to the following four physical properties:</p>
   <table class="def propdef" data-link-for-hint="top">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-top">top</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one④">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①②">containing block</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto">auto</a> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage①">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>length or percentage
by computed value type 
   </table>
   <p>This property specifies how far an absolutely positioned box’s top margin
  edge is offset below the top edge of the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①③">containing block</a>.</p>
   <p>For relatively positioned boxes, the offset is with respect to the top edge of
  the box itself (i.e., the box is given a position in the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①④">normal flow</a>,
  and then offset from that position according to this property).</p>
   <p>For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
  rectangle</em> as described in Sticky positioning.</p>
   <p>For absolutely positioned elements whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①④">containing
  block</a> is based on a block-level element, this property is an offset from
  the padding edge of that element.</p>
   <table class="def propdef" data-link-for-hint="right">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-right">right</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑤">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage②">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⑤">containing block</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①">auto</a> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage③">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>length or percentage
by computed value type 
   </table>
   <p>Similar to <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①⑤">top</a>, but specifies how far a box’s right margin edge is offset
  to the left of the right edge of the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⑥">containing block</a>.</p>
   <p>For relatively positioned boxes, the offset is with respect to the right edge
  of the box itself (i.e., the box is given a position in the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⑤">normal flow</a>,
  and then offset from that position according to this property).</p>
   <p>For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
  rectangle</em> as described in Sticky positioning.</p>
   <p>For absolutely positioned elements whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⑦">containing
  block</a> is based on a block-level element, this property is an offset from
  the padding edge of that element.</p>
   <table class="def propdef" data-link-for-hint="bottom">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-bottom">bottom</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑥">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage④">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⑧">containing block</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto②">auto</a> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑤">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>length or percentage
by computed value type 
   </table>
   <p>Similar to <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①⑥">top</a>, but specifies how far a box’s bottom margin edge is offset
  above the bottom edge of the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block①⑨">containing block</a>.</p>
   <p>For relatively positioned boxes, the offset is with respect to the bottom edge
  of the box itself (i.e., the box is given a position in the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⑥">normal flow</a>,
  and then offset from that position according to this property).</p>
   <p>For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
  rectangle</em> as described in Sticky positioning.</p>
   <p>For absolutely positioned elements whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⓪">containing
  block</a> is based on a block-level element, this property is an offset from
  the padding edge of that element.</p>
   <table class="def propdef" data-link-for-hint="left">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-left">left</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑦">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑥">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②①">containing block</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto③">auto</a> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑦">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>length or percentage
by computed value type 
   </table>
   <p>Similar to <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①⑦">top</a>, but specifies how far a box’s left margin edge is offset
  to the right of the left edge of the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②②">containing block</a>.</p>
   <p>For relatively positioned boxes, the offset is with respect to the left edge of
  the box itself (i.e., the box is given a position in the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⑦">normal flow</a>,
  and then offset from that position according to this property).</p>
   <p>For stickily positioned boxes, the value is used to compute the <em>sticky-constraint
  rectangle</em> as described in Sticky positioning.</p>
   <p>For absolutely positioned elements whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②③">containing
  block</a> is based on a block-level element, this property is an offset from
  the padding edge of that element.</p>
   <p>The values for the four properties have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="top,right,bottom,left, offset-start, offset-end, offset-before, offset-after" data-dfn-type="value" data-export id="valdef-top-length">&lt;length><a class="self-link" href="#valdef-top-length"></a></dfn> 
    <dd> The offset is a fixed distance from the reference edge. Negative values are
    allowed. 
    <dt><dfn class="css" data-dfn-for="top,right,bottom,left, offset-start, offset-end, offset-before, offset-after" data-dfn-type="value" data-export id="valdef-top-percentage">&lt;percentage><a class="self-link" href="#valdef-top-percentage"></a></dfn> 
    <dd> The offset is a percentage of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②④">containing block’s</a> width (for <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①⑦">left</a> or <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①⑦">right</a>)
    or height (for <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top①⑧">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①⑥">bottom</a>).
    For stickily positioned elements, the offset is a percentage of the flow root’s
    width (for <span class="property" id="ref-for-propdef-left①⑧">left</span> or <span class="property" id="ref-for-propdef-right①⑧">right</span>) or height (for <span class="property" id="ref-for-propdef-top①⑨">top</span> or <span class="property" id="ref-for-propdef-bottom①⑦">bottom</span>).
    Negative values are allowed. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="top,right,bottom,left, offset-start, offset-end, offset-before, offset-after" data-dfn-type="value" data-export id="valdef-top-auto">auto</dfn>
    <dd> For non-replaced elements, the effect of this value depends on which of related
    properties have the value <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto④">auto</a> as well. See the sections on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width">width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height">height</a> of absolutely positioned, non-replaced elements for details.
    For replaced elements, the effect of this value depends only on the intrinsic
    dimensions of the replaced content. See the sections on the <span class="property" id="ref-for-propdef-width①">width</span> and <span class="property" id="ref-for-propdef-height①">height</span> of absolutely positioned, replaced elements for details. 
   </dl>
   <p class="note" role="note"> Note, for fixed positioned elements using large values or
    negative values may easily move elements outside the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport⑤">viewport</a> and make the
    contents unreachable through scrolling or other means. Authors should be aware that
    fixed position elements are always relative to the <span>initial
    containing block</span>. </p>
   <h3 class="heading settled" data-level="6.7" id="logical-box-offsets-beaso"><span class="secno">6.7. </span><span class="content"> Logical box insets: <a class="property" data-link-type="propdesc" href="#propdef-inset-before" id="ref-for-propdef-inset-before">inset-before</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-end" id="ref-for-propdef-inset-end">inset-end</a>, <a class="property" data-link-type="propdesc" href="#propdef-inset-after" id="ref-for-propdef-inset-after">inset-after</a> and <a class="property" data-link-type="propdesc" href="#propdef-inset-start" id="ref-for-propdef-inset-start">inset-start</a></span><a class="self-link" href="#logical-box-offsets-beaso"></a></h3>
   <p class="issue" id="issue-e992d10f"><a class="self-link" href="#issue-e992d10f"></a> See <a data-link-type="biblio" href="#biblio-css-logical-1">[CSS-LOGICAL-1]</a>; this section is not up-to-date.</p>
   <p>Logical offset properties allow for insetting positioned boxes based on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑤">direction</a> properties. When both the physical property and
  equivalent logical property (based on <span class="property" id="ref-for-propdef-writing-mode①">writing-mode</span> and <span class="property" id="ref-for-propdef-direction⑥">direction</span>) are
  specified the physical property computes to the computed value of the corresponding
  logical property.</p>
   <p>Positioned elements generate positioned boxes, and may be laid out according to
  the following four logical properties taking into account the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode②">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑦">direction</a> of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⑤">containing block</a>:</p>
   <table class="def propdef" data-link-for-hint="inset-before">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-before">inset-before</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-after">inset-after</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-start">inset-start</dfn>, <dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-inset-end">inset-end</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑧">|</a> <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑧">&lt;length-percentage></a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>refer to height of <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⑥">containing block</a> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <span class="css">auto</span> or a computed <a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage" id="ref-for-typedef-length-percentage⑨">&lt;length-percentage></a> value 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>length or percentage
by computed value type 
   </table>
   <p>For an absolutely positioned box this property specifies how far the corresponding
  margin edge is offset from the corresponding physical reference edge of the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⑦">containing block</a>.</p>
   <p>The particular physical reference edge that is used when offsetting is based
  on the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode③">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑧">direction</a> properties.</p>
   <p>The combination of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode④">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction⑨">direction</a> properties determines the
  appropriate physical reference edge for offsetting.</p>
   <p>The table below shows logical offset properties (per <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑤">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①⓪">direction</a>) and the physical reference edge from which the offset will occur.</p>
   <div class="figure">
    <table class="lpr" id="logical-physical-relations">
     <thead>
      <tr>
       <th colspan="2" rowspan="2">
       <td colspan="6"><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑥">writing-mode</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①①">direction</a>
      <tr>
       <td>horizontal-tb / ltr
       <td>horizontal-tb / rtl
       <td>vertical-rl / ltr
       <td>vertical-rl / rtl
       <td>vertical-lr / ltr
       <td>vertical-lr / rtl
     <tbody>
      <tr>
       <td rowspan="4">
        <div>Edge</div>
       <td>top
       <td>inset-before
       <td>inset-before
       <td>inset-start
       <td>inset-end
       <td>inset-start
       <td>inset-end
      <tr>
       <td>right
       <td>inset-end
       <td>inset-start
       <td>inset-before
       <td>inset-before
       <td>inset-after
       <td>inset-after
      <tr>
       <td>bottom
       <td>inset-after
       <td>inset-after
       <td>inset-end
       <td>inset-start
       <td>inset-end
       <td>inset-start
      <tr>
       <td>left
       <td>inset-start
       <td>inset-end
       <td>inset-after
       <td>inset-after
       <td>inset-before
       <td>inset-before
    </table>
    <p class="caption"> Relationship of physical inset edges and the logical properties per <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode" id="ref-for-propdef-writing-mode⑦">writing-mode</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①②">direction</a>. </p>
   </div>
   <p class="issue" id="issue-f0660eeb"><a class="self-link" href="#issue-f0660eeb"></a>The logical property definitions should move to the Logical Properties module.</p>
   <p>For relatively positioned boxes, the inset is with respect to the property’s
  corresponding physical reference edge of the box itself (i.e., the box is given a
  position in the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⑧">normal flow</a>, and then offset from that position according
  to the property).</p>
   <p class="issue" id="issue-40a62b16"><a class="self-link" href="#issue-40a62b16"></a>This needs to be defined for sticky positioning.</p>
   <p>For absolutely positioned elements whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⑧">containing block</a> is based on a block-level element, this property is an inset from the corresponding
  padding edge of that element.</p>
   <p class="note" role="note"> Note, for fixed positioned elements using large values or
    negative values may easily move elements outside the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport⑥">viewport</a> and make the
    contents unreachable through scrolling or other means. Authors should be aware that
    fixed position elements are always relative to the <span>initial
    containing block</span>. </p>
   <h2 class="heading settled" data-level="7" id="position-root"><span class="secno">7. </span><span class="content"> Choosing a different containing block for positioning</span><a class="self-link" href="#position-root"></a></h2>
   <h3 class="heading settled" data-level="7.1" id="attachment-properties"><span class="secno">7.1. </span><span class="content"> Attachment properties: <a class="property" data-link-type="propdesc">attachment-type</a>, <span class="property">attachment-top</span>, <span class="property">attachment-right</span>, <span class="property">attachment-bottom</span>, <span class="property">attachment-left</span>, and <span class="property">attachment</span></span><a class="self-link" href="#attachment-properties"></a></h3>
   <p class="issue" id="issue-d3a4d052"><a class="self-link" href="#issue-d3a4d052"></a> Ideas have been raised to allow changing the positioning containing block or
    allowing positioning and sizing to use different containing blocks. </p>
   <h2 class="heading settled" data-level="8" id="size-and-position-details"><span class="secno">8. </span><span class="content"> Sizing and positioning details</span><a class="self-link" href="#size-and-position-details"></a></h2>
   <h3 class="heading settled" data-level="8.1" id="abs-non-replaced-width"><span class="secno">8.1. </span><span class="content"> The width of absolute or fixed positioned, non-replaced elements</span><a class="self-link" href="#abs-non-replaced-width"></a></h3>
   <p>The constraint that determines the used values for these elements is:</p>
   <p><code> <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left①⑨">left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left">margin-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width" id="ref-for-propdef-border-left-width">border-left-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-left" id="ref-for-propdef-padding-left">padding-left</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②">width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-right" id="ref-for-propdef-padding-right">padding-right</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width" id="ref-for-propdef-border-right-width">border-right-width</a> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right">margin-right</a> + <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right①⑨">right</a> = width of containing block </code></p>
   <p>If all three of <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②⓪">left</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width③">width</a>, and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②⓪">right</a> are <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto⑤">auto</a>: First set any <span class="css">auto</span> values
  for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left①">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right①">margin-right</a> to <span class="css">0</span>. Then, if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①③">direction</a> property of the
  element establishing the static-position <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block②⑨">containing block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr②">ltr</a> set <span class="property" id="ref-for-propdef-left②①">left</span> to the static position and apply rule number <em>three</em> below; otherwise, set <span class="property" id="ref-for-propdef-right②①">right</span> to the static-position and apply rule number <em>one</em> below.</p>
   <p>If none of the three is <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto⑥">auto</a>: If both <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left②">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right②">margin-right</a> are <span class="css">auto</span>,
  solve the equation under the extra constraint that the two margins get equal values,
  unless this would make them negative, in which case when direction of the containing
  block is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr③">ltr</a> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl②">rtl</a>), set <span class="property" id="ref-for-propdef-margin-left③">margin-left</span> (<span class="property" id="ref-for-propdef-margin-right③">margin-right</span>) to <span class="css">0</span> and solve for <span class="property" id="ref-for-propdef-margin-right④">margin-right</span> (<span class="property" id="ref-for-propdef-margin-left④">margin-left</span>). If one of <span class="property" id="ref-for-propdef-margin-left⑤">margin-left</span> or <span class="property" id="ref-for-propdef-margin-right⑤">margin-right</span> is <span class="css">auto</span>,
  solve the equation for that value. If the values are over-constrained, ignore the value
  for <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②②">left</a> (in case the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①④">direction</a> property of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③⓪">containing block</a> is <span class="css" id="ref-for-valdef-direction-rtl③">rtl</span>) or <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②②">right</a> (in case <span class="property" id="ref-for-propdef-direction①⑤">direction</span> is <span class="css" id="ref-for-valdef-direction-ltr④">ltr</span>) and solve for that value.</p>
   <p>Otherwise, set <span class="css">auto</span> values for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left⑥">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right⑥">margin-right</a> to <span class="css">0</span>, and pick
  one of the following six rules that apply.</p>
   <ol>
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②③">left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width④">width</a> are <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto⑦">auto</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②③">right</a> is not <span class="css" id="ref-for-valdef-top-auto⑧">auto</span>, then the width is
    shrink-to-fit. Then solve for <span class="property" id="ref-for-propdef-left②④">left</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②⑤">left</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②④">right</a> are <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto⑨">auto</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑤">width</a> is not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto">auto</a>, then if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①⑥">direction</a> property of the element establishing the static-position <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③①">containing block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑤">ltr</a> set <span class="property" id="ref-for-propdef-left②⑥">left</span> to the static-position,
    otherwise set <span class="property" id="ref-for-propdef-right②⑤">right</span> to the static-position. Then solve for <span class="property" id="ref-for-propdef-left②⑦">left</span> (if 'direction
    is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl④">rtl</a>) or <span class="property" id="ref-for-propdef-right②⑥">right</span> (if <span class="property" id="ref-for-propdef-direction①⑦">direction</span> is <span class="css" id="ref-for-valdef-direction-ltr⑥">ltr</span>). 
    <li> If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑥">width</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②⑦">right</a> are <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto①">auto</a> and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②⑧">left</a> is not <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①⓪">auto</a>, then the width is
    shrink-to-fit. Then solve for <span class="property" id="ref-for-propdef-right②⑧">right</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left②⑨">left</a> is <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①①">auto</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑦">width</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right②⑨">right</a> are not <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto②">auto</a>, then solve for <span class="property" id="ref-for-propdef-left③⓪">left</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width⑧">width</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto" id="ref-for-valdef-width-auto③">auto</a>, <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③①">left</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③⓪">right</a> are not <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①②">auto</a>, then solve for <span class="property" id="ref-for-propdef-width⑨">width</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③①">right</a> is <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①③">auto</a>, <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③②">left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①⓪">width</a> are not <span class="css" id="ref-for-valdef-top-auto①④">auto</span>, then solve for <span class="property" id="ref-for-propdef-right③②">right</span>. 
   </ol>
   <table class="data" id="abspos-auto">
    <caption> Summary of rules for <code>dir=ltr</code> in horizontal writing modes </caption>
    <colgroup span="5">
    <colgroup span="1">
    <thead>
     <tr>
      <th colspan="5">Is auto? 
      <th rowspan="2">Result 
     <tr>
      <th><a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③③">left</a> 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①①">width</a> 
      <th><a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③③">right</a> 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left⑦">margin-left</a> 
      <th><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right⑦">margin-right</a> 
    <tbody>
     <tr>
      <td>✔ 
      <td>✔ 
      <td>✔ 
      <td colspan="2">any 
      <td>
       <ul>
        <li>auto margins → zero 
        <li>left → static pos 
        <li>width → shrink-to-fit 
        <li>right → solve 
       </ul>
     <tr>
      <td rowspan="4">✘ 
      <td rowspan="4">✘ 
      <td rowspan="4">✘ 
      <td>✔ 
      <td>✘ 
      <td rowspan="2"> auto margin → free space 
     <tr>
      <td>✘ 
      <td>✔ 
     <tr>
      <td>✔ 
      <td>✔ 
      <td>
       <ul>
        <li>margins split positive free space 
        <li>right margin gets negative free space 
       </ul>
     <tr>
      <td>✘ 
      <td>✘ 
      <td> treat <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③④">right</a> as <a class="css" data-link-type="maybe" href="#valdef-top-auto" id="ref-for-valdef-top-auto①⑤">auto</a> 
     <tr>
      <td>✔ 
      <td>✘ 
      <td>✔ 
      <td colspan="2">any 
      <td>
       <ul>
        <li>auto margins → zero 
        <li>left → static pos 
        <li>width → as specified 
        <li>right → solve 
       </ul>
     <tr>
      <td>✔ 
      <td>✔ 
      <td>✘ 
      <td colspan="2">any 
      <td>
       <ul>
        <li>auto margins → zero 
        <li>left → solve 
        <li>width → shrink-to-fit 
        <li>right → as specified 
       </ul>
     <tr>
      <td>✘ 
      <td>✔ 
      <td>✔ 
      <td colspan="2">any 
      <td>
       <ul>
        <li>auto margins → zero 
        <li>left → as specified 
        <li>width → shrink-to-fit 
        <li>right → solve 
       </ul>
     <tr>
      <td>✔ 
      <td>✘ 
      <td>✘ 
      <td colspan="2" rowspan="3">any 
      <td rowspan="3">
       <ul>
        <li>auto margins → zero 
        <li>solve for auto 
       </ul>
     <tr>
      <td>✘ 
      <td>✘ 
      <td>✔ 
     <tr>
      <td>✘ 
      <td>✔ 
      <td>✘ 
   </table>
   <h3 class="heading settled" data-level="8.2" id="abs-replaced-width"><span class="secno">8.2. </span><span class="content"> The width of absolute or fixed positioned, replaced elements</span><a class="self-link" href="#abs-replaced-width"></a></h3>
   <p>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①②">width</a> both have computed values of <span class="css">auto</span> and the element also has an
  intrinsic width, then that intrinsic width is the used value of <span class="property" id="ref-for-propdef-width①③">width</span>.</p>
   <p>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height③">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①④">width</a> both have computed values of <span class="css">auto</span> and the element has no
  intrinsic width, but does have an intrinsic height and intrinsic ratio; or if <span class="property" id="ref-for-propdef-width①⑤">width</span> has a computed value of <span class="css">auto</span>, <span class="property" id="ref-for-propdef-height④">height</span> has some other computed value, and the element
  does have an intrinsic ratio; then the used value of <span class="property" id="ref-for-propdef-width①⑥">width</span> is:</p>
   <p><code>(used height) * (intrinsic ratio)</code></p>
   <p>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑤">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①⑦">width</a> both have computed values of <span class="css">auto</span>, the element has an
  intrinsic ratio but no intrinsic height or width, and the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③②">containing block’s</a> width does
  not itself depend on the replaced element’s width, then the used value of <span class="property" id="ref-for-propdef-width①⑧">width</span> is
  calculated from the constraint equation used for <a href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth">block-level, non-replaced elements in </a><a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow①⑨">normal flow</a>.</p>
   <p>Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width①⑨">width</a> has a computed value of <span class="css">auto</span>, and the element has an intrinsic
  width, then that intrinsic width is the used value of <span class="property" id="ref-for-propdef-width②⓪">width</span>.</p>
   <p>Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②①">width</a> has a computed value of <span class="css">auto</span>, but none of the conditions above
  are met, and then the used value of <span class="property" id="ref-for-propdef-width②②">width</span> becomes <span class="css">300px</span>. If <span class="css">300px</span> is too wide
  to fit the device, user agents should use the width of the largest rectangle that has a
  2:1 ratio and fits the device instead.</p>
   <p>After establishing the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②③">width</a>, in order to position the replaced element, apply the
  following rules as appropriate.</p>
   <ol>
    <li> If both <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③④">left</a> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③⑤">right</a> have the value <span class="css">auto</span>, and if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction①⑧">direction</a> property
    of the element establishing the static-position <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③③">containing block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑦">ltr</a>, set <span class="property" id="ref-for-propdef-left③⑤">left</span> to the static position and solve for <span class="property" id="ref-for-propdef-right③⑥">right</span>; else if <span class="property" id="ref-for-propdef-direction①⑨">direction</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑤">rtl</a>, set <span class="property" id="ref-for-propdef-right③⑦">right</span> to the static position and solve for <span class="property" id="ref-for-propdef-left③⑥">left</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③⑦">left</a> is <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③⑧">right</a> is not <span class="css">auto</span>, replace any <span class="css">auto</span> on <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left⑧">margin-left</a> or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right⑧">margin-right</a> with <span class="css">0</span>, then solve for <span class="property" id="ref-for-propdef-left③⑧">left</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right③⑨">right</a> is <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left③⑨">left</a> is not <span class="css">auto</span>, replace any <span class="css">auto</span> on <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left⑨">margin-left</a> or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right⑨">margin-right</a> with <span class="css">0</span>, then solve for <span class="property" id="ref-for-propdef-right④⓪">right</span>. 
    <li> If at this point both <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-left" id="ref-for-propdef-margin-left①⓪">margin-left</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-right" id="ref-for-propdef-margin-right①⓪">margin-right</a> are still <span class="css">auto</span>, solve the
    equation under the extra constraint that the two margins must get equal values,
    unless this would make them negative, in which case when the direction of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③④">containing block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑧">ltr</a> (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑥">rtl</a>), set <span class="property" id="ref-for-propdef-margin-left①①">margin-left</span> (<span class="property" id="ref-for-propdef-margin-right①①">margin-right</span>) to <span class="css">0</span> and solve for <span class="property" id="ref-for-propdef-margin-right①②">margin-right</span> (<span class="property" id="ref-for-propdef-margin-left①②">margin-left</span>). 
    <li> If at this point there is an <span class="css">auto</span> remaining, solve the equation for that value. 
    <li> If at this point the values are over-constrained, ignore the value for either <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left④⓪">left</a> (in case the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction②⓪">direction</a> property of the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③⑤">containing block</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl" id="ref-for-valdef-direction-rtl⑦">rtl</a>)
    or <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right④①">right</a> (in case <span class="property" id="ref-for-propdef-direction②①">direction</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr" id="ref-for-valdef-direction-ltr⑨">ltr</a>) and solve for that value. 
   </ol>
   <h3 class="heading settled" data-level="8.3" id="abs-non-replaced-height"><span class="secno">8.3. </span><span class="content"> The height of absolute or fixed positioned, non-replaced elements</span><a class="self-link" href="#abs-non-replaced-height"></a></h3>
   <p>For absolutely positioned elements, the used values of the vertical dimensions must
  satisfy this constraint:</p>
   <p><code> <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②⓪">top</a> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top">margin-top</a></span> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width" id="ref-for-propdef-border-top-width">border-top-width</a></span> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-top" id="ref-for-propdef-padding-top">padding-top</a></span> + <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑥">height</a> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom" id="ref-for-propdef-padding-bottom">padding-bottom</a></span> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width" id="ref-for-propdef-border-bottom-width">border-bottom-width</a></span> + <span><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom">margin-bottom</a></span> + <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①⑧">bottom</a> = <span>height of containing block</span> </code></p>
   <p>If all three of <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②①">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑦">height</a>, and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom①⑨">bottom</a> are <span class="css">auto</span>: First set any <span class="css">auto</span> values for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top①">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom①">margin-bottom</a> to <span class="css">0</span>, then set <span class="property" id="ref-for-propdef-top②②">top</span> to the static
  position, and finally apply rule number <em>three</em> below.</p>
   <p>If none of the three are <span class="css">auto</span>: If both <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top②">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom②">margin-bottom</a> are <span class="css">auto</span>,
  solve the equation under the extra constraint that the two margins get equal values. If
  one of <span class="property" id="ref-for-propdef-margin-top③">margin-top</span> or <span class="property" id="ref-for-propdef-margin-bottom③">margin-bottom</span> is <span class="css">auto</span>, solve the equation for that value. If
  the values are over-constrained, ignore the value for <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②⓪">bottom</a> and solve for that value.</p>
   <p>Otherwise, set <span class="css">auto</span> values for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top④">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom④">margin-bottom</a> to <span class="css">0</span>, and pick
  one of the following six rules that apply.</p>
   <ol>
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②③">top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑧">height</a> are <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②①">bottom</a> is not <span class="css">auto</span>, then the height is
    based on the <a href="#root-height">Auto heights for block formatting context
    roots</a>, and solve for <span class="property" id="ref-for-propdef-top②④">top</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②⑤">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②②">bottom</a> are <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height⑨">height</a> is not <span class="css">auto</span>, then set <span class="property" id="ref-for-propdef-top②⑥">top</span> to
    the static position, then solve for <span class="property" id="ref-for-propdef-bottom②③">bottom</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①⓪">height</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②④">bottom</a> are <span class="css">auto</span> and <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②⑦">top</a> is not <span class="css">auto</span>, then the height is
    based on the <a href="#root-height">Auto heights for block formatting context
    roots</a>, and solve for <span class="property" id="ref-for-propdef-bottom②⑤">bottom</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top②⑧">top</a> is <span class="css">auto</span>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①①">height</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②⑥">bottom</a> are not <span class="css">auto</span>, then solve for <span class="property" id="ref-for-propdef-top②⑨">top</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①②">height</a> is <span class="css">auto</span>, <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③⓪">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②⑦">bottom</a> are not <span class="css">auto</span>, then solve for <span class="property" id="ref-for-propdef-height①③">height</span>. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom②⑧">bottom</a> is <span class="css">auto</span>, <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③①">top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①④">height</a> are not <span class="css">auto</span>, then solve for <span class="property" id="ref-for-propdef-bottom②⑨">bottom</span>. 
   </ol>
   <h3 class="heading settled" data-level="8.4" id="abs-replaced-height"><span class="secno">8.4. </span><span class="content"> The height of absolute or fixed positioned, replaced elements</span><a class="self-link" href="#abs-replaced-height"></a></h3>
   <p>If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①⑤">height</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②④">width</a> both have computed values of <span class="css">auto</span> and the element also has an
  intrinsic height, then that intrinsic height is the used value of <span class="property" id="ref-for-propdef-height①⑥">height</span>.</p>
   <p>Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①⑦">height</a> has a computed value of <span class="css">auto</span> and the element has an intrinsic
  ratio then the used value of <span class="property" id="ref-for-propdef-height①⑧">height</span> is:</p>
   <p><code>(used width) / (intrinsic ratio)</code></p>
   <p></p>
   <p>Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height①⑨">height</a> has a computed value of <span class="css">auto</span> and the element has an intrinsic
  height, then that intrinsic height is the used value of <span class="property" id="ref-for-propdef-height②⓪">height</span>.</p>
   <p>Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②①">height</a> has a computed value of <span class="css">auto</span>, but none of the conditions above
  are met, then the used value of <span class="property" id="ref-for-propdef-height②②">height</span> must be set to the height of the largest
  rectangle that has a 2:1 ratio, has a height not greater than <span class="css">150px</span>, and has a width not
  greater than the device width.</p>
   <p>After establishing the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-height" id="ref-for-propdef-height②③">height</a>, in order to position the replaced element, apply the
  following rules as appropriate.</p>
   <ol>
    <li> If both <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③②">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom③⓪">bottom</a> have the value <span class="css">auto</span>, replace <span class="property" id="ref-for-propdef-top③③">top</span> with the
    element’s static position. 
    <li> If <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom③①">bottom</a> is <span class="css">auto</span>, replace any <span class="css">auto</span> on <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top⑤">margin-top</a> or <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom⑤">margin-bottom</a> with <span class="css">0</span>. 
    <li> If at this point both <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-top" id="ref-for-propdef-margin-top⑥">margin-top</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom" id="ref-for-propdef-margin-bottom⑥">margin-bottom</a> are still <span class="css">auto</span>,
    solve the equation under the extra constraint that the two margins must get
    equal values. 
    <li> If at this point there is only one <span class="css">auto</span> remaining, solve the equation
    for that value. 
    <li> If at this point the values are over-constrained, ignore the value for <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom③②">bottom</a> and solve for that value. 
   </ol>
   <h3 class="heading settled" data-level="8.5" id="root-height"><span class="secno">8.5. </span><span class="content"> Auto heights for block formatting context roots</span><a class="self-link" href="#root-height"></a></h3>
   <p>In certain cases (see, e.g., <a href="#abs-non-replaced-height">The height of
  absolute or fixed positioned, non-replaced element</a> above), the height
  of an element that establishes a block formatting context is computed as follows:</p>
   <p>If it only has inline-level children, the height is the distance between the
  top of the topmost line box and the bottom of the bottommost line box.</p>
   <p>If it has block-level children, the height is the distance between the top
  margin-edge of the topmost block-level child box and the bottom margin-edge of
  the bottommost block-level child box.</p>
   <p>Absolutely positioned children are ignored, and relatively positioned boxes are
  considered without their inset. Note that the child box may be an <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level">anonymous block box</a>.</p>
   <p>In addition, if the element has any floating descendants whose bottom margin edge
  is below the element’s bottom content edge, then the height is increased to
  include those edges. Only non-positioned <a data-link-type="dfn" href="#float" id="ref-for-float⑥">floats</a> that
  participate in this block formatting context are taken into account, e.g., <span id="ref-for-float⑦">floats</span> inside absolutely positioned descendants or
  other <span id="ref-for-float⑧">floats</span> are not.</p>
   <h2 class="heading settled" data-level="9" id="dis-pos-flo"><span class="secno">9. </span><span class="content"> Relationships between <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display">display</a>, <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①①">position</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float">float</a></span><a class="self-link" href="#dis-pos-flo"></a></h2>
   <p>The three properties that affect box generation and layout — <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display①">display</a>, <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①②">position</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float①">float</a> — interact as follows:</p>
   <ol>
    <li> If <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display②">display</a> has the value <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-display-3/#valdef-display-none" id="ref-for-valdef-display-none">none</a>, then <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①③">position</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float②">float</a> do not apply.
    In this case, the element generates no box. 
    <li> Otherwise, if <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①④">position</a> has the value <a class="css" data-link-type="maybe" href="#valdef-position-absolute" id="ref-for-valdef-position-absolute②">absolute</a> or <a class="css" data-link-type="maybe" href="#valdef-position-fixed" id="ref-for-valdef-position-fixed⑤">fixed</a>,
    and the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float③">float</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-left" id="ref-for-valdef-float-left">left</a> or <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-right" id="ref-for-valdef-float-right">right</a>, the box is absolutely
    positioned and the computed value of <span class="property" id="ref-for-propdef-float④">float</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-none" id="ref-for-valdef-float-none">none</a>. The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display③">display</a> is
    set according to the table below. Positioning of the box will determined by
    the <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③④">top</a>, <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right④②">right</a>, <a class="property" data-link-type="propdesc" href="#propdef-bottom" id="ref-for-propdef-bottom③③">bottom</a> and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left④①">left</a> properties and the box’s <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③⑥">containing block</a>. 
    <li> Otherwise, if <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-float" id="ref-for-propdef-float⑤">float</a> is other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-none" id="ref-for-valdef-float-none①">none</a>, the box is <a data-link-type="dfn" href="#float" id="ref-for-float⑨">floated</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display④">display</a> is set according to the table below. 
    <li> Otherwise, if the element is the root element, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display⑤">display</a> is set according to the
    table below. 
    <li> Otherwise, the remaining <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display⑥">display</a> property values apply as specified. 
   </ol>
   <table class="relationship-table">
    <tbody>
     <tr>
      <th>Specified value
      <th>Computed value
     <tr>
      <td>inline-table
      <td>table
     <tr>
      <td> inline, <span>table-row-group</span>, <span>table-column</span>, <span>table-column-group</span>, <span>table-header-group</span>, <span>table-footer-group</span>, <span>table-row</span>, <span>table-cell</span>, <span>table-caption</span>, <span>inline-block</span> 
      <td>block
     <tr>
      <td>others 
      <td><span>same as specified</span>
   </table>
   <p class="note" role="note"> For new values defined for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-display-3/#propdef-display" id="ref-for-propdef-display⑦">display</a> property, the respective modules that define a
    new value also define the handling of the relationship with positioning and floats. </p>
   <h2 class="heading settled" data-level="10" id="comparison"><span class="secno">10. </span><span class="content"> Comparison of normal flow, floats, and positioning</span><a class="self-link" href="#comparison"></a></h2>
   <p><em>This section is not normative.</em></p>
   <p>To illustrate the differences between <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow②⓪">normal flow</a>, <a data-link-type="dfn" href="#relative-position" id="ref-for-relative-position②">relative positioning</a>, <a data-link-type="dfn" href="#float" id="ref-for-float①⓪">floats</a>,
  and absolute positioning, we provide a series of examples based on the following HTML:</p>
   <div class="example" id="example-5752760c">
    <a class="self-link" href="#example-5752760c"></a> 
<pre class="lang-html highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>html</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>head</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>title</c-><c- p>></c->Comparison of positioning schemes<c- p>&lt;/</c-><c- f>title</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>style</c-><c- p>></c->
          <c- f>body</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>block</c-><c- p>;</c-> <c- k>font-size</c-><c- p>:</c-><c- mi>12</c-><c- b>px</c-><c- p>;</c-> <c- k>line-height</c-><c- p>:</c-> <c- mi>200</c-><c- b>%</c-><c- p>;</c->
                  <c- k>width</c-><c- p>:</c-> <c- mi>400</c-><c- b>px</c-><c- p>;</c-> <c- k>height</c-><c- p>:</c-> <c- mi>400</c-><c- b>px</c-> <c- p>}</c->
          <c- f>p</c->    <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>block</c-> <c- p>}</c->
          <c- f>span</c-> <c- p>{</c-> <c- k>display</c-><c- p>:</c-> <c- kc>inline</c-> <c- p>}</c->
        <c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>head</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>></c->
        Beginning of p contents.
        <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"outer"</c-><c- p>></c-> Start of outer contents.
        <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"inner"</c-><c- p>></c-> Inner contents.<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
        End of outer contents.<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
        End of p contents.
    <c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>></c->
</pre>
   </div>
   <p>The final positions of boxes generated by the <em>outer</em> and <em>inner</em> elements vary in each example. In each illustration, the numbers to the left of
  the illustration indicate the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow②①">normal flow</a> position of the
  double-spaced (for clarity) lines.</p>
   <p class="note" role="note"><span>Note:</span> The diagrams in this section are illustrative and not to scale. They are
  meant to highlight the differences between the various <a data-link-type="dfn" href="#positioning-schemes" id="ref-for-positioning-schemes">positioning
  schemes</a>, and are not intended to be reference renderings of the
  examples given.</p>
   <h3 class="heading settled" data-level="10.1" id="comp-normal-flow"><span class="secno">10.1. </span><span class="content"> Normal flow</span><a class="self-link" href="#comp-normal-flow"></a></h3>
   <p>Consider the following CSS declarations for <em>outer</em> and <em>inner</em> that do not alter the <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow②②">normal flow</a> of boxes:</p>
   <div class="example" id="example-d045d8f9">
    <a class="self-link" href="#example-d045d8f9"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> red <c- p>}</c->
<c- f>#inner </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue <c- p>}</c->
</pre>
   </div>
   <p>The P element contains all inline content: <a href="https://www.w3.org/TR/CSS2/visuren.html#anonymous">anonymous inline text</a> and
  two SPAN elements. Therefore, all of the content will be laid out in an inline
  formatting context, within a <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③⑦">containing block</a> established by the P element, producing
  something like:</p>
   <figure>
     <img alt="Image illustrating the normal flow of text between parent and sibling boxes." src="images/flow-generic.png"> 
    <figcaption> All of the text within the P’s containing block flows together as continuous text,
    even though it’s located in separated nested elements. </figcaption>
   </figure>
   <h3 class="heading settled" data-level="10.2" id="comp-relpos"><span class="secno">10.2. </span><span class="content"> Relative positioning</span><a class="self-link" href="#comp-relpos"></a></h3>
   <p>To see the effect of <a data-link-type="dfn" href="#relative-position" id="ref-for-relative-position③">relative positioning</a>,
  we specify:</p>
   <div class="example" id="example-bf500659">
    <a class="self-link" href="#example-bf500659"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c-> <c- k>position</c-><c- p>:</c-> relative<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- m>-12</c-><c- l>px</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> red <c- p>}</c->
<c- f>#inner </c-><c- p>{</c-> <c- k>position</c-><c- p>:</c-> relative<c- p>;</c-> <c- k>top</c-><c- p>:</c-> <c- m>12</c-><c- l>px</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> blue <c- p>}</c->
</pre>
   </div>
   <p>Text flows normally up to the <em>outer</em> element. The <em>outer</em> text is
  then flowed into its <a data-link-type="dfn" href="#normal-flow" id="ref-for-normal-flow②③">normal flow</a> position and dimensions at the end of line 1. Then,
  the inline boxes containing the text (distributed over three lines) are shifted as a
  unit by <span class="css">-12px</span> (upwards).</p>
   <p>The contents of <em>inner</em>, as a child of <em>outer</em>, would normally flow
  immediately after the words "of outer contents" (on line 1.5). However, the <em>inner</em> contents are themselves offset relative to the <em>outer</em> contents by <span class="css">12px</span> (downwards), back to their original position on line 2.</p>
   <p class="note" role="note"> Note that the content following <em>outer</em> is not affected by the relative
    positioning of <em>outer</em>. </p>
   <figure>
     <img src="images/flow-relative.png"> 
    <figcaption> The result is identical to normal flow,
      except that the "outer" text is shifted 12px upward,
      without affecting the flow of the "body" or "inner" text. </figcaption>
   </figure>
   <p class="note" role="note"> Note also that had the offset of <em>outer</em> been <span class="css">-24px</span>, the text  of <em>outer</em> and the body text would have overlapped. </p>
   <h3 class="heading settled" data-level="10.3" id="comp-floating"><span class="secno">10.3. </span><span class="content"> Floating a box</span><a class="self-link" href="#comp-floating"></a></h3>
   <p>Now consider the effect of <a href="https://www.w3.org/TR/CSS2/visuren.html#floats"> floating</a> the <em>inner</em> element’s text to the right by means of the
  following rules:</p>
   <div class="example" id="example-7c19fd19">
    <a class="self-link" href="#example-7c19fd19"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> red <c- p>}</c->
<c- f>#inner </c-><c- p>{</c-> <c- k>float</c-><c- p>:</c-> right<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> blue <c- p>}</c->
</pre>
   </div>
   <p>Text flows normally up to the <em>inner</em> box, which is pulled out of the flow
  and <a data-link-type="dfn" href="#float" id="ref-for-float①①">floated</a> to the right margin (its <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-width" id="ref-for-propdef-width②⑤">width</a> has been
  assigned explicitly). Line boxes to the left of the float are shortened, and the
  document’s remaining text flows into them.</p>
   <figure>
     <img alt="Image illustrating the effects of floating a box." src="images/flow-float.png"> 
    <figcaption> The "inner" text lays out in an independent box on the right,
    causing the remaining "body" and "outer" text to flow around it. </figcaption>
   </figure>
   <p>To show the effect of the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear①">clear</a> property, we add a <em>sibling</em> element to the
  example:</p>
   <div class="example" id="example-e3784dd4">
    <a class="self-link" href="#example-e3784dd4"></a> 
<pre class="lang-html highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>html</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>head</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>title</c-><c- p>></c->Comparison of positioning schemes II<c- p>&lt;/</c-><c- f>title</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>style</c-><c- p>></c->
          <c- p>#</c-><c- nn>inner</c-> <c- p>{</c-> <c- k>float</c-><c- p>:</c-> <c- kc>right</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- mi>130</c-><c- b>px</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> <c- kc>blue</c-> <c- p>}</c->
          <c- p>#</c-><c- nn>sibling</c-> <c- p>{</c-> <c- k>color</c-><c- p>:</c-> <c- kc>red</c-> <c- p>}</c->
        <c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>head</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>body</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>p</c-><c- p>></c->
        Beginning of p contents.
        <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"outer"</c-><c- p>></c-> Start of outer contents.
        <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"inner"</c-><c- p>></c-> Inner contents.<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"sibling"</c-><c- p>></c-> Sibling contents.<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
        End of outer contents.<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
        End of p contents.
    <c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>></c->
</pre>
   </div>
   <p>These styles cause the <em>inner</em> box to float to the right, as before,
  and the document’s remaining text to flow into the vacated space:</p>
   <figure>
     <img alt="Image illustrating the effects of floating a box without setting the clear property to control the flow of text around the box." src="images/flow-clear.png"> 
    <figcaption> Identical to the previous example,
      save that there is now "sibling" text
      flowing with the "body" and "outer" text. </figcaption>
   </figure>
   <p>However, if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visuren.html#propdef-clear" id="ref-for-propdef-clear②">clear</a> property on the <em>sibling</em> element is set to <a class="property" data-link-type="propdesc" href="#propdef-right" id="ref-for-propdef-right④③">right</a> (i.e., the generated <em>sibling</em> box will not accept a position next to <a data-link-type="dfn" href="#float" id="ref-for-float①②">floating</a> boxes to its right), the <em>sibling</em> content begins to flow below the
  float:</p>
   <div class="example" id="example-54c91152">
    <a class="self-link" href="#example-54c91152"></a> 
<pre class="lang-css highlight"><c- f>#inner </c-><c- p>{</c-> <c- k>float</c-><c- p>:</c-> right<c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c-> <c- k>color</c-><c- p>:</c-> blue <c- p>}</c->
<c- f>#sibling </c-><c- p>{</c-> <c- k>clear</c-><c- p>:</c-> right<c- p>;</c-> <c- k>color</c-><c- p>:</c-> red <c- p>}</c->
</pre>
   </div>
   <figure>
     <img alt="Image illustrating the effects of floating an element with setting the clear property to control the flow of text around the element." src="images/flow-clear2.png"> 
    <figcaption> Now the "sibling" text moves down to below the "inner" text’s box,
      leaving blank space behind.
      The text following the "sibling" text flows after it as normal. </figcaption>
   </figure>
   <h3 class="heading settled" data-level="10.4" id="comp-abspos"><span class="secno">10.4. </span><span class="content"> Absolute positioning</span><a class="self-link" href="#comp-abspos"></a></h3>
   <p>Next, we consider the effect of absolute positioning. Consider the following CSS
  declarations for <em>outer</em> and <em>inner</em>:</p>
   <div class="example" id="example-90defcbb">
    <a class="self-link" href="#example-90defcbb"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c->
    <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c->
    <c- k>top</c-><c- p>:</c-> <c- m>200</c-><c- l>px</c-><c- p>;</c-> <c- k>left</c-><c- p>:</c-> <c- m>200</c-><c- l>px</c-><c- p>;</c->
    <c- k>width</c-><c- p>:</c-> <c- m>200</c-><c- l>px</c-><c- p>;</c->
    <c- k>color</c-><c- p>:</c-> red<c- p>;</c->
<c- p>}</c->
<c- f>#inner </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> blue <c- p>}</c->
</pre>
   </div>
   <p>which cause the top of the <em>outer</em> box to be positioned with respect to its <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block③⑧">containing block</a>. The <span id="ref-for-containing-block③⑨">containing block</span> for a positioned box is established by the
  nearest positioned ancestor (or, if none exists, the <span>initial containing block</span>, as in
  our example). The top side of the <em>outer</em> box is <span class="css">200px</span> below the top of the <span id="ref-for-containing-block④⓪">containing block</span> and the left side is <span class="css">200px</span> from the left side. The child box of <em>outer</em> is flowed normally with respect to its parent.</p>
   <figure>
     <img alt="Image illustrating the effects of absolutely positioning a box." src="images/flow-absolute.png"> 
    <figcaption> All of the text within #outer (the "outer" and "inner" text)
      moves down to an independent box in the lower right corner.
      The two halves of "body" text flow together. </figcaption>
   </figure>
   <p>The following example shows an absolutely positioned box that is a child of a relatively
  positioned box. Although the parent <em>outer</em> box is not actually offset, setting
  its <a class="property" data-link-type="propdesc" href="#propdef-position" id="ref-for-propdef-position①⑤">position</a> property to <a class="css" data-link-type="maybe" href="#valdef-position-relative" id="ref-for-valdef-position-relative④">relative</a> means that its box may serve as the containing
  block for positioned descendants. Since the <em>outer</em> box is an inline box that is
  split across several lines, the first inline box’s top and left edges (depicted by thick
  dashed lines in the illustration below) serve as references for <a class="property" data-link-type="propdesc" href="#propdef-top" id="ref-for-propdef-top③⑤">top</a> and <a class="property" data-link-type="propdesc" href="#propdef-left" id="ref-for-propdef-left④②">left</a> offsets.</p>
   <div class="example" id="example-f34c6317">
    <a class="self-link" href="#example-f34c6317"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c->
    <c- k>position</c-><c- p>:</c-> relative<c- p>;</c->
    <c- k>color</c-><c- p>:</c-> red
<c- p>}</c->
<c- f>#inner </c-><c- p>{</c->
    <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c->
    <c- k>top</c-><c- p>:</c-> <c- m>200</c-><c- l>px</c-><c- p>;</c-> <c- k>left</c-><c- p>:</c-> <c- m>-100</c-><c- l>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c->
    <c- k>color</c-><c- p>:</c-> blue<c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <p>This results in something like the following:</p>
   <figure>
     <img alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block." src="images/flow-abs-rel.png"> 
    <figcaption> The "inner" text is positioned in an independent box,
      relative to the top-left corner of the start of the "outer" text. </figcaption>
   </figure>
   <p>If we do not position the <em>outer</em> box:</p>
   <div class="example" id="example-100563b8">
    <a class="self-link" href="#example-100563b8"></a> 
<pre class="lang-css highlight"><c- f>#outer </c-><c- p>{</c-> <c- k>color</c-><c- p>:</c-> red <c- p>}</c->
<c- f>#inner </c-><c- p>{</c->
    <c- k>position</c-><c- p>:</c-> absolute<c- p>;</c->
    <c- k>top</c-><c- p>:</c-> <c- m>200</c-><c- l>px</c-><c- p>;</c-> <c- k>left</c-><c- p>:</c-> <c- m>-100</c-><c- l>px</c-><c- p>;</c->
    <c- k>height</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c-> <c- k>width</c-><c- p>:</c-> <c- m>130</c-><c- l>px</c-><c- p>;</c->
    <c- k>color</c-><c- p>:</c-> blue<c- p>;</c->
<c- p>}</c->
</pre>
   </div>
   <p>the <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block④①">containing block</a> for <em>inner</em> becomes the <span>initial
  containing block</span> (in our example). The following illustration shows where
  the <em>inner</em> box would end up in this case.</p>
   <figure>
     <img alt="Image illustrating the effects of absolutely positioning a box with respect to a containing block established by a normally positioned parent." src="images/flow-static.png"> 
    <figcaption> Same as before,
      except now the "inner text" is positioned relative to the top-left corner of the page itself. </figcaption>
   </figure>
   <p>Relative and absolute positioning may be used to implement change bars, as shown
  in the following example. The following fragment:</p>
   <div class="example" id="example-3b789003">
    <a class="self-link" href="#example-3b789003"></a> 
<pre class="lang-html highlight"><c- p>&lt;</c-><c- f>p</c-> <c- e>style</c-><c- o>=</c-><c- s>"position: relative; margin-right: 10px; left: 10px;"</c-><c- p>></c->
  I used two red hyphens to serve as a change bar. They
  will "float" to the left of the line containing THIS
  <c- p>&lt;</c-><c- f>span</c-> <c- e>style</c-><c- o>=</c-><c- s>"position: absolute; top: auto; left: -1em; color: red;"</c-><c- p>></c->--<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
  word.
<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
</pre>
   </div>
   <p>might result in something like:</p>
   <figure>
     <img alt="Image illustrating the use of floats to create a changebar effect." src="images/changebar.png"> 
    <figcaption> The two red hyphens, indicating a change,
      sit in the left margin of the page
      on the line containing the word "THIS",
      regardless of what line that ends up being. </figcaption>
   </figure>
   <p>First, the paragraph (whose <a data-link-type="dfn" href="#containing-block" id="ref-for-containing-block④②">containing block</a> sides are shown in the
  illustration) is flowed normally. Then it is offset <span class="css">10px</span> from the left edge
  of the <span id="ref-for-containing-block④③">containing block</span> (thus, a right margin of <span class="css">10px</span> has been
  reserved in anticipation of the offset). The two hyphens acting as change bars
  are taken out of the flow and positioned at the current line (due to 'top: auto'), <span class="css">-1em</span> from the left edge of its containing block (established by the P in
  its final position).  The result is that the change bars seem to "float" to the
  left of the current line.</p>
   <h2 class="heading settled" data-level="11" id="layered-presentation"><span class="secno">11. </span><span class="content"> Layered presentation</span><a class="self-link" href="#layered-presentation"></a></h2>
   <p><em>In the following sections, the expression "in front of" means closer to the
  user as the user faces the screen.</em></p>
   <p>In CSS, each box has a position in three dimensions. In addition to their horizontal
  and vertical positions, boxes lie along a "z-axis" and are formatted one on top
  of the other. Z-axis positions are particularly relevant when boxes overlap
  visually. This section discusses how boxes may be positioned along the z-axis.</p>
   <p>Each box belongs to one <dfn data-dfn-type="dfn" data-export id="stacking-context">stacking context<a class="self-link" href="#stacking-context"></a></dfn>. Each box in a given stacking
  context has an integer <dfn data-dfn-type="dfn" data-export id="stack-level">stack level<a class="self-link" href="#stack-level"></a></dfn>, which is its position on the z-axis
  relative to other boxes in the same stacking context. Boxes with greater stack
  levels are always formatted in front of boxes with lower stack levels. Boxes may
  have negative stack levels. Boxes with the same stack level in a stacking context
  are stacked bottom-to-top according to document tree order.</p>
   <p>The root element creates a <dfn data-dfn-type="dfn" data-export id="root-stacking-context">root stacking context<a class="self-link" href="#root-stacking-context"></a></dfn>, but other elements
  may establish <dfn data-dfn-type="dfn" data-export id="local-stacking-contexts">local stacking contexts<a class="self-link" href="#local-stacking-contexts"></a></dfn>. Stacking contexts are inherited.
  A local stacking context is atomic; boxes in other stacking contexts may not come
  between any of its boxes.</p>
   <p>An element that establishes a local stacking context generates a box that has
  two stack levels: one for the stacking context it creates (always <span class="css">0</span>) and one
  for the stacking context to which it belongs (given by the <a class="property" data-link-type="propdesc" href="#propdef-z-index" id="ref-for-propdef-z-index">z-index</a> property).</p>
   <p>An element’s box has the same stack level as its parent’s box unless
  given a different stack level with the <a class="property" data-link-type="propdesc" href="#propdef-z-index" id="ref-for-propdef-z-index①">z-index</a> property.</p>
   <table class="def propdef" data-link-for-hint="z-index">
    <tbody>
     <tr>
      <th>Name:
      <td><dfn class="dfn-paneled css" data-dfn-type="property" data-export id="propdef-z-index">z-index</dfn>
     <tr class="value">
      <th><a href="https://drafts.csswg.org/css-values/#value-defs">Value:</a>
      <td class="prod">auto <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-4/#comb-one" id="ref-for-comb-one⑨">|</a> &lt;integer> 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#initial-values">Initial:</a>
      <td>auto 
     <tr>
      <th>Applies to:
      <td>positioned elements 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#inherited-property">Inherited:</a>
      <td>no 
     <tr>
      <th><a href="https://drafts.csswg.org/css-values/#percentages">Percentages:</a>
      <td>N/A 
     <tr>
      <th><a href="https://drafts.csswg.org/css-cascade/#computed">Computed value:</a>
      <td>the keyword <a class="css" data-link-type="maybe" href="#valdef-z-index-auto" id="ref-for-valdef-z-index-auto">auto</a> or an integer 
     <tr>
      <th>Canonical order:
      <td>per grammar 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animatable:</a>
      <td>&lt;integer> 
     <tr>
      <th><a href="https://drafts.csswg.org/web-animations/#animation-type">Animation type:</a>
      <td>by computed value 
   </table>
   <p>For a positioned box, the <a class="property" data-link-type="propdesc" href="#propdef-z-index" id="ref-for-propdef-z-index②">z-index</a> property specifies:</p>
   <ol>
    <li> The stack level of the box in the current stacking context. 
    <li> Whether the box establishes a stacking context. 
   </ol>
   <p>Values have the following meanings:</p>
   <dl>
    <dt><dfn class="css" data-dfn-for="z-index" data-dfn-type="value" data-export id="valdef-z-index-integer">&lt;integer><a class="self-link" href="#valdef-z-index-integer"></a></dfn>
    <dd> This integer is the stack level of the generated box in the current stacking
      context. The box also establishes a new stacking context. 
    <dt><dfn class="dfn-paneled css" data-dfn-for="z-index" data-dfn-type="value" data-export id="valdef-z-index-auto">auto</dfn>
    <dd> The stack level of the generated box in the current stacking context is 0.
      If the box has 'position: fixed' or if it is the root, it also establishes a new stacking context. 
   </dl>
   <p>In the following example, the stack levels of the boxes (named with their "id"
  attributes) are: "text2"=0, "image"=1, "text3"=2, and "text1"=3. The "text2" stack level
  is inherited from the root box. The others are specified with the <a class="property" data-link-type="propdesc" href="#propdef-z-index" id="ref-for-propdef-z-index③">z-index</a> property.</p>
   <div class="example" id="example-1ec246e1">
    <a class="self-link" href="#example-1ec246e1"></a> 
<pre class="lang-html highlight"><c- cp>&lt;!DOCTYPE html></c->
<c- p>&lt;</c-><c- f>html</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>head</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>title</c-><c- p>></c->Z-order positioning<c- p>&lt;/</c-><c- f>title</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>style</c-> <c- e>type</c-><c- o>=</c-><c- s>"text/css"</c-><c- p>></c->
            <c- p>.</c-><c- nc>pile</c-> <c- p>{</c->
            <c- k>position</c-><c- p>:</c-> <c- kc>absolute</c-><c- p>;</c->
            <c- k>left</c-><c- p>:</c-> <c- mi>2</c-><c- b>in</c-><c- p>;</c->
            <c- k>top</c-><c- p>:</c-> <c- mi>2</c-><c- b>in</c-><c- p>;</c->
            <c- k>width</c-><c- p>:</c-> <c- mi>3</c-><c- b>in</c-><c- p>;</c->
            <c- k>height</c-><c- p>:</c-> <c- mi>3</c-><c- b>in</c-><c- p>;</c->
            <c- p>}</c->
        <c- p>&lt;/</c-><c- f>style</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>head</c-><c- p>></c->
    <c- p>&lt;</c-><c- f>body</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>p</c-><c- p>></c->
            <c- p>&lt;</c-><c- f>img</c-> <c- e>id</c-><c- o>=</c-><c- s>"image"</c-> <c- e>class</c-><c- o>=</c-><c- s>"pile"</c->
                <c- e>src</c-><c- o>=</c-><c- s>"butterfly.png"</c-> <c- e>alt</c-><c- o>=</c-><c- s>"A butterfly image"</c->
                <c- e>style</c-><c- o>=</c-><c- s>"z-index: 1"</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"text1"</c-> <c- e>class</c-><c- o>=</c-><c- s>"pile"</c->
                <c- e>style</c-><c- o>=</c-><c- s>"z-index: 3"</c-><c- p>></c->
            This text will overlay the butterfly image.
        <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"text2"</c-><c- p>></c->
            This text will be beneath everything.
        <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
        <c- p>&lt;</c-><c- f>div</c-> <c- e>id</c-><c- o>=</c-><c- s>"text3"</c-> <c- e>class</c-><c- o>=</c-><c- s>"pile"</c->
                <c- e>style</c-><c- o>=</c-><c- s>"z-index: 2"</c-><c- p>></c->
            This text will underlay text1, but overlay the butterfly image
        <c- p>&lt;/</c-><c- f>div</c-><c- p>></c->
    <c- p>&lt;/</c-><c- f>body</c-><c- p>></c->
<c- p>&lt;/</c-><c- f>html</c-><c- p>></c->
</pre>
    <p>This example demonstrates the notion of <em>transparency</em>. The default behavior of
    the background is to allow boxes behind it to be visible. In the example, each box
    transparently overlays the boxes below it. This behavior can be overridden by using one
    of the existing <a href="https://www.w3.org/TR/CSS2/colors.html#background-properties">background properties</a>.</p>
   </div>
   <h2 class="heading settled" data-level="12" id="det-stacking-context"><span class="secno">12. </span><span class="content"> Detailed stacking context</span><a class="self-link" href="#det-stacking-context"></a></h2>
   <h3 class="heading settled" data-level="12.1" id="definitions-stack"><span class="secno">12.1. </span><span class="content"> Definitions</span><a class="self-link" href="#definitions-stack"></a></h3>
   <dl>
    <dt>Tree Order
    <dd> The preorder depth-first traversal of the <em>rendering</em> tree, in logical (not
      visual) order for bidirectional content, after taking into account properties
      that move boxes around. 
    <dt>Element
    <dd> In this description, "element" refers to actual elements, pseudo-elements, and
      anonymous boxes. Pseudo-elements and anonymous boxes are treated as descendants
      in the appropriate places. For example, an outside list marker comes before an
      adjoining '::before' box in the line box, which comes before the content of the
      box, and so forth. 
   </dl>
   <h3 class="heading settled" data-level="12.2" id="painting-order"><span class="secno">12.2. </span><span class="content"> Painting order</span><a class="self-link" href="#painting-order"></a></h3>
   <p>The bottom of the stack is the furthest from the user, the top of the stack is the
  nearest to the user:</p>
   <figure>
     <img alt="A stacking context with four layers" src="images/stack.png"> 
    <figcaption>Schematic diagram of a stacking context with four layers.</figcaption>
   </figure>
   <p>The stacking context background and most negative positioned stacking contexts
  are at the bottom of the stack, while the most positive positioned stacking
  contexts are at the top of the stack.</p>
   <p>The canvas is transparent if contained within another, and given a UA-defined
  color if it is not. It is infinite in extent and contains the root element.
  Initially, the <a data-link-type="dfn" href="#viewport" id="ref-for-viewport⑦">viewport</a> is anchored with its top left corner at the
  canvas origin.</p>
   <p>The painting order for the descendants of an element generating a stacking
  context (see the <a class="property" data-link-type="propdesc" href="#propdef-z-index" id="ref-for-propdef-z-index④">z-index</a> property) is:</p>
   <ol>
    <li>
     If the element is a root element: 
     <ol>
      <li>background color of element over the entire canvas.
      <li> background image of element, over the entire canvas, anchored at the origin
          that would be used if it was painted for the root element. 
     </ol>
    <li>
      If the element is a block, list-item, or other block equivalent: 
     <ol>
      <li>background color of element unless it is the root element.
      <li>background image of element unless it is the root element.
      <li>column rule of the element.
      <li>border of element.
     </ol>
      Otherwise, if the element is a block-level table: 
     <ol>
      <li>table backgrounds (color then image) unless it is the root element.
      <li>column group backgrounds (color then image).
      <li>column backgrounds (color then image).
      <li>row group backgrounds (color then image).
      <li>row backgrounds (color then image).
      <li>cell backgrounds (color then image).
      <li>cell column rule for multi-column.
      <li>all table borders (in tree order for separated borders).
     </ol>
    <li> Stacking contexts formed by positioned descendants with negative z-indices
      (excluding 0) in z-index order (most negative first) then tree order. 
    <li>
      For all its in-flow, non-positioned, block-level descendants in tree order: If the
      element is a block, list-item, or other block equivalent: 
     <ol>
      <li>background color of element.
      <li>background image of element.
      <li>column rule of the element.
      <li>border of element.
     </ol>
      Otherwise, the element is a table: 
     <ol>
      <li>table backgrounds (color then image).
      <li>column group backgrounds (color then image).
      <li>column backgrounds (color then image).
      <li>row group backgrounds (color then image).
      <li>row backgrounds (color then image).
      <li>cell backgrounds (color then image).
      <li>cell column rule (multi-column).
      <li>all table borders (in tree order for separated borders).
     </ol>
    <li> All non-positioned <a data-link-type="dfn" href="#float" id="ref-for-float①③">floating</a> descendants, in tree
      order. For each one of these, treat the element as if it created a new stacking
      context, but any positioned descendants and descendants which actually create
      a new stacking context are considered part of the parent stacking context,
      not this new one. 
    <li>
     If the element is an inline element that generates a stacking context, then: 
     <ol>
      <li>
       For each line box that the element is in: 
       <ol>
        <li> Jump to <a href="#each-box">7.2.1</a> for the box(es) of the element
              in that line box (in tree order). 
       </ol>
     </ol>
    <li>
      Otherwise: first for the element, then for all its in-flow, non-positioned,
        block-level descendants in tree order: 
     <ol>
      <li> If the element is a block-level replaced element, then: the replaced
            content, atomically. 
      <li>
       Otherwise, for each line box of that element: 
       <ol>
        <li id="each-box">
         <a class="self-link" href="#each-box"></a> For each box that is a child of that element, in that line box, in
                tree order: 
         <ol>
          <li>background color of element.
          <li>background image of element.
          <li>column rule of the element.
          <li>border of element.
          <li>
           For inline elements: 
           <ol>
            <li>
              For all the elements in-flow, non-positioned,
                        inline-level children that are in this line box, and
                        all runs of text inside the element that is on this
                        line box, in tree order: 
             <ol>
              <li>
               If this is a run of text, then: 
               <ol>
                <li> any underlining affecting the text
                                of the element, in tree order of the
                                elements applying the underlining
                                (such that the deepest element’s
                                underlining, if any, is painted
                                topmost and the root element’s
                                underlining, if any, is drawn
                                bottommost). 
                <li> any overlining affecting the text of
                                the element, in tree order of the
                                elements applying the overlining
                                (such that the deepest element’s
                                overlining, if any, is painted
                                topmost and the root element’s
                                overlining, if any, is drawn
                                bottommost). 
                <li>the text
                <li> any line-through affecting the text
                                of the element, in tree order of the
                                elements applying the line-through
                                (such that the deepest element’s
                                line-through, if any, is painted
                                topmost and the root element’s
                                line-through, if any, is drawn
                                bottommost). 
               </ol>
              <li> Otherwise, jump to <a href="#each-box">7.2.1</a> for that element 
             </ol>
           </ol>
          <li>
           For inline-block and inline-table elements: 
           <ol>
            <li> For each one of these, treat the element as if it
                        created a new stacking context, but any positioned
                        descendants and descendants which actually create a
                        new stacking context are considered part of the
                        parent stacking context, not this new one. 
           </ol>
          <li>
           For inline-level replaced elements: 
           <ol>
            <li>the replaced content, atomically.
           </ol>
          <li> Optionally, the outline of the element (see <a href="#stack-order-step-ten">10 below</a>). 
         </ol>
         <p class="note" role="note"> Note, some of the boxes may have been generated by line
                  splitting or the Unicode bidirectional algorithm. </p>
       </ol>
      <li> Optionally, if the element is block-level, the outline of the element
            (see <a href="#stack-order-step-ten">10 below</a>). 
     </ol>
    <li>
      All positioned, opacity or transform descendants, in tree order that fall
      into the following categories: 
     <ol>
      <li>
        All positioned descendants with 'z-index: auto' or 'z-index: 0', in tree order. 
       <p>For those with 'z-index: auto', treat the element as if it created a new
          stacking context, but any positioned descendants and descendants which actually
          create a new stacking context should be considered part of the parent stacking
          context, not this new one.</p>
       <p>For those with 'z-index: 0' treat the stacking context generated atomically.</p>
      <li> All opacity descendants with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-color-4/#propdef-opacity" id="ref-for-propdef-opacity">opacity</a> less than <span class="css">1</span>, in tree order, create a
          stacking context generated atomically. 
      <li> All transform descendants with <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-transforms-1/#propdef-transform" id="ref-for-propdef-transform">transform</a> other than <span class="css">none</span>, in tree order, create
          a stacking context generated atomically. 
     </ol>
    <li> Stacking contexts formed by positioned descendants with z-indices greater than or
    equal to 1 in z-index order (smallest first) then tree order. 
    <li id="stack-order-step-ten"><a class="self-link" href="#stack-order-step-ten"></a> Finally, implementations that do not draw outlines in steps above must draw outlines
    from this stacking context at this stage. (It is recommended to draw outlines in
    this step and not in the steps above.) 
   </ol>
   <h3 class="heading settled" data-level="12.3" id="stacking-notes"><span class="secno">12.3. </span><span class="content"> Notes</span><a class="self-link" href="#stacking-notes"></a></h3>
   <p>The background of the root element is only painted once, over the whole canvas.</p>
   <p>While the backgrounds of bidirectional inlines are painted in tree order, they
  are positioned in visual order. Since the positioning of inline backgrounds is
  unspecified in CSS, the exact result of these two requirements is UA-defined.
  A future version of CSS may define this in more detail.</p>
   <h2 class="heading settled" data-level="13" id="ack"><span class="secno">13. </span><span class="content"> Acknowledgments</span><a class="self-link" href="#ack"></a></h2>
   <p>This module would not have been possible without input and support from many
  helpful people. Thanks to Bert Bos, Tantek Çelik, Anton Prowse,
  Rossen Atanassov, Chris Jones, John Jansen, Sylvain Galineau.</p>
   <h2 class="no-num heading settled" id="changes"><span class="content">Changes</span><a class="self-link" href="#changes"></a></h2>
   <h3 class="heading settled" id="changes-201502"><span class="content"> Changes since the 3 February 2015 WD</span><a class="self-link" href="#changes-201502"></a></h3>
   <p>The following significant changes were made since the <a href="https://www.w3.org/TR/2015/WD-css3-positioning-20150203/">5 February 2015 Working Draft</a></p>
   <ul>
    <li>Added informative table to clarify positioning calculations. 
    <li>Removed “page” and “center” positioning schemes,
    which had not in fact been approved by the CSSWG
    and should not have been published in the first place. 
   </ul>
  </main>
  <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
  <h3 class="heading settled" id="document-conventions"><span class="content"> Document conventions</span><a class="self-link" href="#document-conventions"></a></h3>
  <p>Conformance requirements are expressed with a combination of
	descriptive assertions and RFC 2119 terminology. The key words “MUST”,
	“MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”,
	“RECOMMENDED”, “MAY”, and “OPTIONAL” in the normative parts of this
	document are to be interpreted as described in RFC 2119.
	However, for readability, these words do not appear in all uppercase
	letters in this specification. </p>
  <p>All of the text of this specification is normative except sections
	explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
  <p>Examples in this specification are introduced with the words “for example”
	or are set apart from the normative text with <code>class="example"</code>,
	like this: </p>
  <div class="example" id="example-ae2b6bc0">
   <a class="self-link" href="#example-ae2b6bc0"></a> 
   <p>This is an example of an informative example. </p>
  </div>
  <p>Informative notes begin with the word “Note” and are set apart from the
	normative text with <code>class="note"</code>, like this: </p>
  <p class="note" role="note">Note, this is an informative note. </p>
  <p>Advisements are normative sections styled to evoke special attention and are
	set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
	this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
  <h3 class="heading settled" id="conform-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conform-classes"></a></h3>
  <p>Conformance to this specification
	is defined for three conformance classes: </p>
  <dl>
   <dt>style sheet 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#style-sheet">CSS
			style sheet</a>. 
   <dt>renderer 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
			documents that use them. 
   <dt>authoring tool 
   <dd>A <a href="http://www.w3.org/TR/CSS2/conform.html#user-agent">UA</a> that writes a style sheet. 
  </dl>
  <p>A style sheet is conformant to this specification
	if all of its statements that use syntax defined in this module are valid
	according to the generic CSS grammar and the individual grammars of each
	feature defined in this module. </p>
  <p>A renderer is conformant to this specification
	if, in addition to interpreting the style sheet as defined by the
	appropriate specifications, it supports all the features defined
	by this specification by parsing them correctly
	and rendering the document accordingly. However, the inability of a
	UA to correctly render a document due to limitations of the device
	does not make the UA non-conformant. (For example, a UA is not
	required to render color on a monochrome monitor.) </p>
  <p>An authoring tool is conformant to this specification
	if it writes style sheets that are syntactically correct according to the
	generic CSS grammar and the individual grammars of each feature in
	this module, and meet all other conformance requirements of style sheets
	as described in this module. </p>
  <h3 class="heading settled" id="conform-responsible"><span class="content"> Requirements for Responsible Implementation of CSS</span><a class="self-link" href="#conform-responsible"></a></h3>
  <p>The following sections define several conformance requirements
		for implementing CSS responsibly,
		in a way that promotes interoperability in the present and future. </p>
  <h4 class="heading settled" id="conform-partial"><span class="content"> Partial Implementations</span><a class="self-link" href="#conform-partial"></a></h4>
  <p>So that authors can exploit the forward-compatible parsing rules to assign fallback values, <strong>CSS renderers <em>must</em> treat as invalid
		(and <a href="http://www.w3.org/TR/CSS2/conform.html#ignore">ignore as appropriate</a>)
		any at-rules, properties, property values, keywords, and other syntactic constructs
		for which they have no usable level of support</strong>.
		In particular, user agents <em>must not</em> selectively ignore
		unsupported property values and honor supported values in a single multi-value property declaration:
		if any value is considered invalid (as unsupported values must be),
		CSS requires that the entire declaration be ignored. </p>
  <h4 class="heading settled" id="conform-future-proofing"><span class="content"> Implementations of Unstable and Proprietary Features</span><a class="self-link" href="#conform-future-proofing"></a></h4>
  <p>To avoid clashes with future stable CSS features,
		the CSSWG recommends <a href="http://www.w3.org/TR/CSS/#future-proofing">following best practices</a> for the implementation of <a href="http://www.w3.org/TR/CSS/#unstable">unstable</a> features and <a href="http://www.w3.org/TR/CSS/#proprietary-extension">proprietary extensions</a> to CSS. </p>
  <h4 class="heading settled" id="conform-testing"><span class="content"> Implementations of CR-level Features</span><a class="self-link" href="#conform-testing"></a></h4>
  <p>Once a specification reaches the Candidate Recommendation stage,
		implementers should release an <a data-link-type="dfn" href="http://www.w3.org/TR/CSS/#vendor-prefix">unprefixed</a> implementation
		of any CR-level feature they can demonstrate
		to be correctly implemented according to spec,
		and should avoid exposing a prefixed variant of that feature. </p>
  <p>To establish and maintain the interoperability of CSS across
		implementations, the CSS Working Group requests that non-experimental
		CSS renderers submit an implementation report (and, if necessary, the
		testcases used for that implementation report) to the W3C before
		releasing an unprefixed implementation of any CSS features. Testcases
		submitted to W3C are subject to review and correction by the CSS
		Working Group. </p>
  <p>
   Further information on submitting testcases and implementation reports
		can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
		Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. 
<script src="https://www.w3.org/scripts/TR/2016/fixup.js"></script>
  </p>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#valdef-position-absolute">absolute</a><span>, in §6.5</span>
   <li>
    auto
    <ul>
     <li><a href="#valdef-top-auto">value for top, right, bottom, left, offset-start, offset-end, offset-before, offset-after</a><span>, in §6.6</span>
     <li><a href="#valdef-z-index-auto">value for z-index</a><span>, in §11</span>
    </ul>
   <li><a href="#propdef-bottom">bottom</a><span>, in §6.6</span>
   <li><a href="#containing-block">containing block</a><span>, in §3.1</span>
   <li><a href="#valdef-position-fixed">fixed</a><span>, in §6.5</span>
   <li><a href="#float">float</a><span>, in §5</span>
   <li><a href="#float">floated box</a><span>, in §5</span>
   <li><a href="#float">floating box</a><span>, in §5</span>
   <li><a href="#propdef-inset-after">inset-after</a><span>, in §6.7</span>
   <li><a href="#propdef-inset-before">inset-before</a><span>, in §6.7</span>
   <li><a href="#propdef-inset-end">inset-end</a><span>, in §6.7</span>
   <li><a href="#propdef-inset-start">inset-start</a><span>, in §6.7</span>
   <li><a href="#valdef-z-index-integer">&lt;integer></a><span>, in §11</span>
   <li><a href="#propdef-left">left</a><span>, in §6.6</span>
   <li><a href="#valdef-top-length">&lt;length></a><span>, in §6.6</span>
   <li><a href="#local-stacking-contexts">local stacking contexts</a><span>, in §11</span>
   <li><a href="#normal-flow">Normal Flow</a><span>, in §4</span>
   <li><a href="#valdef-top-percentage">&lt;percentage></a><span>, in §6.6</span>
   <li><a href="#propdef-position">position</a><span>, in §6.5</span>
   <li><a href="#positioning-schemes">Positioning schemes</a><span>, in §6</span>
   <li><a href="#valdef-position-relative">relative</a><span>, in §6.5</span>
   <li><a href="#relative-position">relatively position</a><span>, in §6.1</span>
   <li><a href="#relative-position">relative position</a><span>, in §6.1</span>
   <li><a href="#relative-position">relpos</a><span>, in §6.1</span>
   <li><a href="#propdef-right">right</a><span>, in §6.6</span>
   <li><a href="#root-stacking-context">root stacking context</a><span>, in §11</span>
   <li><a href="#stacking-context">stacking context</a><span>, in §11</span>
   <li><a href="#stack-level">stack level</a><span>, in §11</span>
   <li><a href="#valdef-position-static">static</a><span>, in §6.5</span>
   <li><a href="#sticky-position">stickily position</a><span>, in §6.2</span>
   <li><a href="#valdef-position-sticky">sticky</a><span>, in §6.5</span>
   <li><a href="#sticky-position">stickypos</a><span>, in §6.2</span>
   <li><a href="#sticky-position">sticky position</a><span>, in §6.2</span>
   <li><a href="#propdef-top">top</a><span>, in §6.6</span>
   <li><a href="#viewport">viewport</a><span>, in §2</span>
   <li><a href="#propdef-z-index">z-index</a><span>, in §11</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-propdef-border-bottom-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-bottom-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-bottom-width">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-left-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-left-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-left-width">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-right-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-right-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-right-width">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-border-top-width">
   <a href="https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width">https://drafts.csswg.org/css-backgrounds-3/#propdef-border-top-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-border-top-width">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-opacity">
   <a href="https://drafts.csswg.org/css-color-4/#propdef-opacity">https://drafts.csswg.org/css-color-4/#propdef-opacity</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-opacity">12.2. 
Painting order</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-display">
   <a href="https://drafts.csswg.org/css-display-3/#propdef-display">https://drafts.csswg.org/css-display-3/#propdef-display</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-display">9. 
Relationships between display, position, and float</a> <a href="#ref-for-propdef-display①">(2)</a> <a href="#ref-for-propdef-display②">(3)</a> <a href="#ref-for-propdef-display③">(4)</a> <a href="#ref-for-propdef-display④">(5)</a> <a href="#ref-for-propdef-display⑤">(6)</a> <a href="#ref-for-propdef-display⑥">(7)</a> <a href="#ref-for-propdef-display⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-initial-containing-block">
   <a href="https://drafts.csswg.org/css-display-3/#initial-containing-block">https://drafts.csswg.org/css-display-3/#initial-containing-block</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initial-containing-block">3.1. 
Definition of containing block</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-display-none">
   <a href="https://drafts.csswg.org/css-display-3/#valdef-display-none">https://drafts.csswg.org/css-display-3/#valdef-display-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-display-none">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-overflow">
   <a href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">https://drafts.csswg.org/css-overflow-3/#propdef-overflow</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-overflow">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-overflow①">(2)</a>
    <li><a href="#ref-for-propdef-overflow②">6.2. 
Sticky positioning</a> <a href="#ref-for-propdef-overflow③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-float-left">
   <a href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-left">https://drafts.csswg.org/css-page-floats-3/#valdef-float-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-float-left">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-float-none">
   <a href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-none">https://drafts.csswg.org/css-page-floats-3/#valdef-float-none</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-float-none">9. 
Relationships between display, position, and float</a> <a href="#ref-for-valdef-float-none①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-float-right">
   <a href="https://drafts.csswg.org/css-page-floats-3/#valdef-float-right">https://drafts.csswg.org/css-page-floats-3/#valdef-float-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-float-right">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-width-auto">
   <a href="https://drafts.csswg.org/css-sizing-3/#valdef-width-auto">https://drafts.csswg.org/css-sizing-3/#valdef-width-auto</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-width-auto">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-valdef-width-auto①">(2)</a> <a href="#ref-for-valdef-width-auto②">(3)</a> <a href="#ref-for-valdef-width-auto③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-transform">
   <a href="https://drafts.csswg.org/css-transforms-1/#propdef-transform">https://drafts.csswg.org/css-transforms-1/#propdef-transform</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-transform">12.2. 
Painting order</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-typedef-length-percentage">
   <a href="https://drafts.csswg.org/css-values-4/#typedef-length-percentage">https://drafts.csswg.org/css-values-4/#typedef-length-percentage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-typedef-length-percentage">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-typedef-length-percentage①">(2)</a> <a href="#ref-for-typedef-length-percentage②">(3)</a> <a href="#ref-for-typedef-length-percentage③">(4)</a> <a href="#ref-for-typedef-length-percentage④">(5)</a> <a href="#ref-for-typedef-length-percentage⑤">(6)</a> <a href="#ref-for-typedef-length-percentage⑥">(7)</a> <a href="#ref-for-typedef-length-percentage⑦">(8)</a>
    <li><a href="#ref-for-typedef-length-percentage⑧">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a> <a href="#ref-for-typedef-length-percentage⑨">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-css-wide-keywords">
   <a href="https://drafts.csswg.org/css-values-4/#css-wide-keywords">https://drafts.csswg.org/css-values-4/#css-wide-keywords</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-css-wide-keywords">1.2. 
Values</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-comb-one">
   <a href="https://drafts.csswg.org/css-values-4/#comb-one">https://drafts.csswg.org/css-values-4/#comb-one</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-comb-one">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-comb-one①">(2)</a> <a href="#ref-for-comb-one②">(3)</a> <a href="#ref-for-comb-one③">(4)</a>
    <li><a href="#ref-for-comb-one④">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-comb-one⑤">(2)</a> <a href="#ref-for-comb-one⑥">(3)</a> <a href="#ref-for-comb-one⑦">(4)</a>
    <li><a href="#ref-for-comb-one⑧">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
    <li><a href="#ref-for-comb-one⑨">11. 
Layered presentation</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-direction">
   <a href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">https://drafts.csswg.org/css-writing-modes-3/#propdef-direction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-direction">3.1. 
Definition of containing block</a> <a href="#ref-for-propdef-direction①">(2)</a> <a href="#ref-for-propdef-direction②">(3)</a>
    <li><a href="#ref-for-propdef-direction③">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-direction④">(2)</a>
    <li><a href="#ref-for-propdef-direction⑤">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a> <a href="#ref-for-propdef-direction⑥">(2)</a> <a href="#ref-for-propdef-direction⑦">(3)</a> <a href="#ref-for-propdef-direction⑧">(4)</a> <a href="#ref-for-propdef-direction⑨">(5)</a> <a href="#ref-for-propdef-direction①⓪">(6)</a> <a href="#ref-for-propdef-direction①①">(7)</a> <a href="#ref-for-propdef-direction①②">(8)</a>
    <li><a href="#ref-for-propdef-direction①③">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-direction①④">(2)</a> <a href="#ref-for-propdef-direction①⑤">(3)</a> <a href="#ref-for-propdef-direction①⑥">(4)</a> <a href="#ref-for-propdef-direction①⑦">(5)</a>
    <li><a href="#ref-for-propdef-direction①⑧">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-direction①⑨">(2)</a> <a href="#ref-for-propdef-direction②⓪">(3)</a> <a href="#ref-for-propdef-direction②①">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-ltr">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-ltr</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-ltr">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-valdef-direction-ltr①">6.1. 
Relative positioning</a>
    <li><a href="#ref-for-valdef-direction-ltr②">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-valdef-direction-ltr③">(2)</a> <a href="#ref-for-valdef-direction-ltr④">(3)</a> <a href="#ref-for-valdef-direction-ltr⑤">(4)</a> <a href="#ref-for-valdef-direction-ltr⑥">(5)</a>
    <li><a href="#ref-for-valdef-direction-ltr⑦">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-valdef-direction-ltr⑧">(2)</a> <a href="#ref-for-valdef-direction-ltr⑨">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-valdef-direction-rtl">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl">https://drafts.csswg.org/css-writing-modes-4/#valdef-direction-rtl</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-direction-rtl">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-valdef-direction-rtl①">6.1. 
Relative positioning</a>
    <li><a href="#ref-for-valdef-direction-rtl②">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-valdef-direction-rtl③">(2)</a> <a href="#ref-for-valdef-direction-rtl④">(3)</a>
    <li><a href="#ref-for-valdef-direction-rtl⑤">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-valdef-direction-rtl⑥">(2)</a> <a href="#ref-for-valdef-direction-rtl⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-writing-mode">
   <a href="https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode">https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-writing-mode">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a> <a href="#ref-for-propdef-writing-mode①">(2)</a> <a href="#ref-for-propdef-writing-mode②">(3)</a> <a href="#ref-for-propdef-writing-mode③">(4)</a> <a href="#ref-for-propdef-writing-mode④">(5)</a> <a href="#ref-for-propdef-writing-mode⑤">(6)</a> <a href="#ref-for-propdef-writing-mode⑥">(7)</a> <a href="#ref-for-propdef-writing-mode⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-clear">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-clear">https://drafts.csswg.org/css2/visuren.html#propdef-clear</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-clear">5. 
Floats</a>
    <li><a href="#ref-for-propdef-clear①">10.3. 
Floating a box</a> <a href="#ref-for-propdef-clear②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-float">
   <a href="https://drafts.csswg.org/css2/visuren.html#propdef-float">https://drafts.csswg.org/css2/visuren.html#propdef-float</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-float">9. 
Relationships between display, position, and float</a> <a href="#ref-for-propdef-float①">(2)</a> <a href="#ref-for-propdef-float②">(3)</a> <a href="#ref-for-propdef-float③">(4)</a> <a href="#ref-for-propdef-float④">(5)</a> <a href="#ref-for-propdef-float⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-height">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-height">https://drafts.csswg.org/css2/visudet.html#propdef-height</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-height">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-height①">(2)</a>
    <li><a href="#ref-for-propdef-height②">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-height③">(2)</a> <a href="#ref-for-propdef-height④">(3)</a> <a href="#ref-for-propdef-height⑤">(4)</a>
    <li><a href="#ref-for-propdef-height⑥">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-height⑦">(2)</a> <a href="#ref-for-propdef-height⑧">(3)</a> <a href="#ref-for-propdef-height⑨">(4)</a> <a href="#ref-for-propdef-height①⓪">(5)</a> <a href="#ref-for-propdef-height①①">(6)</a> <a href="#ref-for-propdef-height①②">(7)</a> <a href="#ref-for-propdef-height①③">(8)</a> <a href="#ref-for-propdef-height①④">(9)</a>
    <li><a href="#ref-for-propdef-height①⑤">8.4. 
The height of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-height①⑥">(2)</a> <a href="#ref-for-propdef-height①⑦">(3)</a> <a href="#ref-for-propdef-height①⑧">(4)</a> <a href="#ref-for-propdef-height①⑨">(5)</a> <a href="#ref-for-propdef-height②⓪">(6)</a> <a href="#ref-for-propdef-height②①">(7)</a> <a href="#ref-for-propdef-height②②">(8)</a> <a href="#ref-for-propdef-height②③">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-x34">
   <a href="https://drafts.csswg.org/css2/visuren.html#x34">https://drafts.csswg.org/css2/visuren.html#x34</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-x34">6. 
Positioning schemes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-width">
   <a href="https://drafts.csswg.org/css2/visudet.html#propdef-width">https://drafts.csswg.org/css2/visudet.html#propdef-width</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-width">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-width①">(2)</a>
    <li><a href="#ref-for-propdef-width②">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-width③">(2)</a> <a href="#ref-for-propdef-width④">(3)</a> <a href="#ref-for-propdef-width⑤">(4)</a> <a href="#ref-for-propdef-width⑥">(5)</a> <a href="#ref-for-propdef-width⑦">(6)</a> <a href="#ref-for-propdef-width⑧">(7)</a> <a href="#ref-for-propdef-width⑨">(8)</a> <a href="#ref-for-propdef-width①⓪">(9)</a> <a href="#ref-for-propdef-width①①">(10)</a>
    <li><a href="#ref-for-propdef-width①②">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-width①③">(2)</a> <a href="#ref-for-propdef-width①④">(3)</a> <a href="#ref-for-propdef-width①⑤">(4)</a> <a href="#ref-for-propdef-width①⑥">(5)</a> <a href="#ref-for-propdef-width①⑦">(6)</a> <a href="#ref-for-propdef-width①⑧">(7)</a> <a href="#ref-for-propdef-width①⑨">(8)</a> <a href="#ref-for-propdef-width②⓪">(9)</a> <a href="#ref-for-propdef-width②①">(10)</a> <a href="#ref-for-propdef-width②②">(11)</a> <a href="#ref-for-propdef-width②③">(12)</a>
    <li><a href="#ref-for-propdef-width②④">8.4. 
The height of absolute or fixed positioned, replaced elements</a>
    <li><a href="#ref-for-propdef-width②⑤">10.3. 
Floating a box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-bottom">https://drafts.csswg.org/css-box-3/#propdef-margin-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-bottom">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-margin-bottom①">(2)</a> <a href="#ref-for-propdef-margin-bottom②">(3)</a> <a href="#ref-for-propdef-margin-bottom③">(4)</a> <a href="#ref-for-propdef-margin-bottom④">(5)</a>
    <li><a href="#ref-for-propdef-margin-bottom⑤">8.4. 
The height of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-margin-bottom⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-left">https://drafts.csswg.org/css-box-3/#propdef-margin-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-left">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-margin-left①">(2)</a> <a href="#ref-for-propdef-margin-left②">(3)</a> <a href="#ref-for-propdef-margin-left③">(4)</a> <a href="#ref-for-propdef-margin-left④">(5)</a> <a href="#ref-for-propdef-margin-left⑤">(6)</a> <a href="#ref-for-propdef-margin-left⑥">(7)</a> <a href="#ref-for-propdef-margin-left⑦">(8)</a>
    <li><a href="#ref-for-propdef-margin-left⑧">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-margin-left⑨">(2)</a> <a href="#ref-for-propdef-margin-left①⓪">(3)</a> <a href="#ref-for-propdef-margin-left①①">(4)</a> <a href="#ref-for-propdef-margin-left①②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-right">https://drafts.csswg.org/css-box-3/#propdef-margin-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-right">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-margin-right①">(2)</a> <a href="#ref-for-propdef-margin-right②">(3)</a> <a href="#ref-for-propdef-margin-right③">(4)</a> <a href="#ref-for-propdef-margin-right④">(5)</a> <a href="#ref-for-propdef-margin-right⑤">(6)</a> <a href="#ref-for-propdef-margin-right⑥">(7)</a> <a href="#ref-for-propdef-margin-right⑦">(8)</a>
    <li><a href="#ref-for-propdef-margin-right⑧">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-margin-right⑨">(2)</a> <a href="#ref-for-propdef-margin-right①⓪">(3)</a> <a href="#ref-for-propdef-margin-right①①">(4)</a> <a href="#ref-for-propdef-margin-right①②">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-margin-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-margin-top">https://drafts.csswg.org/css-box-3/#propdef-margin-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-margin-top">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-margin-top①">(2)</a> <a href="#ref-for-propdef-margin-top②">(3)</a> <a href="#ref-for-propdef-margin-top③">(4)</a> <a href="#ref-for-propdef-margin-top④">(5)</a>
    <li><a href="#ref-for-propdef-margin-top⑤">8.4. 
The height of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-margin-top⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-bottom">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-bottom">https://drafts.csswg.org/css-box-3/#propdef-padding-bottom</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-bottom">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-left">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-left">https://drafts.csswg.org/css-box-3/#propdef-padding-left</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-left">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-right">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-right">https://drafts.csswg.org/css-box-3/#propdef-padding-right</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-right">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-propdef-padding-top">
   <a href="https://drafts.csswg.org/css-box-3/#propdef-padding-top">https://drafts.csswg.org/css-box-3/#propdef-padding-top</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-padding-top">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-scrolling-box">
   <a href="https://drafts.csswg.org/cssom-view-1/#scrolling-box">https://drafts.csswg.org/cssom-view-1/#scrolling-box</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-scrolling-box">6.2. 
Sticky positioning</a> <a href="#ref-for-scrolling-box①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-range-bp-position">
   <a href="https://dom.spec.whatwg.org/#concept-range-bp-position">https://dom.spec.whatwg.org/#concept-range-bp-position</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-range-bp-position">6.6. 
Box offsets: top, right, bottom, left</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[css-backgrounds-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-border-bottom-width" style="color:initial">border-bottom-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-left-width" style="color:initial">border-left-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-right-width" style="color:initial">border-right-width</span>
     <li><span class="dfn-paneled" id="term-for-propdef-border-top-width" style="color:initial">border-top-width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-color-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-opacity" style="color:initial">opacity</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-display-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-display" style="color:initial">display</span>
     <li><span class="dfn-paneled" id="term-for-initial-containing-block" style="color:initial">initial containing block</span>
     <li><span class="dfn-paneled" id="term-for-valdef-display-none" style="color:initial">none</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-overflow-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-overflow" style="color:initial">overflow</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-page-floats-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-float-left" style="color:initial">left</span>
     <li><span class="dfn-paneled" id="term-for-valdef-float-none" style="color:initial">none</span>
     <li><span class="dfn-paneled" id="term-for-valdef-float-right" style="color:initial">right</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-sizing-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-width-auto" style="color:initial">auto</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-transforms-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-transform" style="color:initial">transform</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-values-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-typedef-length-percentage" style="color:initial">&lt;length-percentage></span>
     <li><span class="dfn-paneled" id="term-for-css-wide-keywords" style="color:initial">css-wide keywords</span>
     <li><span class="dfn-paneled" id="term-for-comb-one" style="color:initial">|</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-3]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-direction" style="color:initial">direction</span>
    </ul>
   <li>
    <a data-link-type="biblio">[css-writing-modes-4]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-ltr" style="color:initial">ltr</span>
     <li><span class="dfn-paneled" id="term-for-valdef-direction-rtl" style="color:initial">rtl</span>
     <li><span class="dfn-paneled" id="term-for-propdef-writing-mode" style="color:initial">writing-mode</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-clear" style="color:initial">clear</span>
     <li><span class="dfn-paneled" id="term-for-propdef-float" style="color:initial">float</span>
     <li><span class="dfn-paneled" id="term-for-propdef-height" style="color:initial">height</span>
     <li><span class="dfn-paneled" id="term-for-x34" style="color:initial">relative positioning</span>
     <li><span class="dfn-paneled" id="term-for-propdef-width" style="color:initial">width</span>
    </ul>
   <li>
    <a data-link-type="biblio">[CSS3BOX]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-bottom" style="color:initial">margin-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-left" style="color:initial">margin-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-right" style="color:initial">margin-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-margin-top" style="color:initial">margin-top</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-bottom" style="color:initial">padding-bottom</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-left" style="color:initial">padding-left</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-right" style="color:initial">padding-right</span>
     <li><span class="dfn-paneled" id="term-for-propdef-padding-top" style="color:initial">padding-top</span>
    </ul>
   <li>
    <a data-link-type="biblio">[cssom-view-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-scrolling-box" style="color:initial">scrolling box</span>
    </ul>
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-range-bp-position" style="color:initial">position</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-css-backgrounds-3">[CSS-BACKGROUNDS-3]
   <dd>Bert Bos; Elika Etemad; Brad Kemper. <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders Module Level 3</a>. 17 October 2017. CR. URL: <a href="https://www.w3.org/TR/css-backgrounds-3/">https://www.w3.org/TR/css-backgrounds-3/</a>
   <dt id="biblio-css-color-4">[CSS-COLOR-4]
   <dd>Tab Atkins Jr.; Chris Lilley. <a href="https://www.w3.org/TR/css-color-4/">CSS Color Module Level 4</a>. 5 March 2019. WD. URL: <a href="https://www.w3.org/TR/css-color-4/">https://www.w3.org/TR/css-color-4/</a>
   <dt id="biblio-css-display-3">[CSS-DISPLAY-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. 28 August 2018. CR. URL: <a href="https://www.w3.org/TR/css-display-3/">https://www.w3.org/TR/css-display-3/</a>
   <dt id="biblio-css-logical-1">[CSS-LOGICAL-1]
   <dd>Rossen Atanassov; Elika Etemad. <a href="https://www.w3.org/TR/css-logical-1/">CSS Logical Properties and Values Level 1</a>. 27 August 2018. WD. URL: <a href="https://www.w3.org/TR/css-logical-1/">https://www.w3.org/TR/css-logical-1/</a>
   <dt id="biblio-css-overflow-3">[CSS-OVERFLOW-3]
   <dd>David Baron; Elika Etemad; Florian Rivoal. <a href="https://www.w3.org/TR/css-overflow-3/">CSS Overflow Module Level 3</a>. 31 July 2018. WD. URL: <a href="https://www.w3.org/TR/css-overflow-3/">https://www.w3.org/TR/css-overflow-3/</a>
   <dt id="biblio-css-page-floats-3">[CSS-PAGE-FLOATS-3]
   <dd>Johannes Wilm. <a href="https://www.w3.org/TR/css-page-floats-3/">CSS Page Floats</a>. 15 September 2015. WD. URL: <a href="https://www.w3.org/TR/css-page-floats-3/">https://www.w3.org/TR/css-page-floats-3/</a>
   <dt id="biblio-css-sizing-3">[CSS-SIZING-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-sizing-3/">CSS Intrinsic &amp; Extrinsic Sizing Module Level 3</a>. 22 May 2019. WD. URL: <a href="https://www.w3.org/TR/css-sizing-3/">https://www.w3.org/TR/css-sizing-3/</a>
   <dt id="biblio-css-transforms-1">[CSS-TRANSFORMS-1]
   <dd>Simon Fraser; et al. <a href="https://www.w3.org/TR/css-transforms-1/">CSS Transforms Module Level 1</a>. 14 February 2019. CR. URL: <a href="https://www.w3.org/TR/css-transforms-1/">https://www.w3.org/TR/css-transforms-1/</a>
   <dt id="biblio-css-values-3">[CSS-VALUES-3]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-3/">CSS Values and Units Module Level 3</a>. 31 January 2019. CR. URL: <a href="https://www.w3.org/TR/css-values-3/">https://www.w3.org/TR/css-values-3/</a>
   <dt id="biblio-css-values-4">[CSS-VALUES-4]
   <dd>Tab Atkins Jr.; Elika Etemad. <a href="https://www.w3.org/TR/css-values-4/">CSS Values and Units Module Level 4</a>. 31 January 2019. WD. URL: <a href="https://www.w3.org/TR/css-values-4/">https://www.w3.org/TR/css-values-4/</a>
   <dt id="biblio-css-writing-modes-3">[CSS-WRITING-MODES-3]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-3/">CSS Writing Modes Level 3</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-3/">https://www.w3.org/TR/css-writing-modes-3/</a>
   <dt id="biblio-css-writing-modes-4">[CSS-WRITING-MODES-4]
   <dd>Elika Etemad; Koji Ishii. <a href="https://www.w3.org/TR/css-writing-modes-4/">CSS Writing Modes Level 4</a>. 24 May 2018. CR. URL: <a href="https://www.w3.org/TR/css-writing-modes-4/">https://www.w3.org/TR/css-writing-modes-4/</a>
   <dt id="biblio-css2">[CSS2]
   <dd>Bert Bos; et al. <a href="https://www.w3.org/TR/CSS2/">Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification</a>. 7 June 2011. REC. URL: <a href="https://www.w3.org/TR/CSS2/">https://www.w3.org/TR/CSS2/</a>
   <dt id="biblio-css3box">[CSS3BOX]
   <dd>Elika Etemad. <a href="https://www.w3.org/TR/css-box-3/">CSS Box Model Module Level 3</a>. 18 December 2018. WD. URL: <a href="https://www.w3.org/TR/css-box-3/">https://www.w3.org/TR/css-box-3/</a>
   <dt id="biblio-cssom-view-1">[CSSOM-VIEW-1]
   <dd>Simon Pieters. <a href="https://www.w3.org/TR/cssom-view-1/">CSSOM View Module</a>. 17 March 2016. WD. URL: <a href="https://www.w3.org/TR/cssom-view-1/">https://www.w3.org/TR/cssom-view-1/</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-css1">[CSS1]
   <dd>Håkon Wium Lie; Bert Bos. <a href="https://www.w3.org/TR/CSS1/">Cascading Style Sheets, level 1</a>. 13 September 2018. REC. URL: <a href="https://www.w3.org/TR/CSS1/">https://www.w3.org/TR/CSS1/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="property-index"><span class="content">Property Index</span><a class="self-link" href="#property-index"></a></h2>
  <div class="big-element-wrapper">
   <table class="index">
    <thead>
     <tr>
      <th scope="col">Name
      <th scope="col">Value
      <th scope="col">Initial
      <th scope="col">Applies to
      <th scope="col">Inh.
      <th scope="col">%ages
      <th scope="col">Ani­mat­able
      <th scope="col">Anim­ation type
      <th scope="col">Canonical order
      <th scope="col">Com­puted value
    <tbody>
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-bottom" id="ref-for-propdef-bottom③④">bottom</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-after" id="ref-for-propdef-inset-after①">inset-after</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-before" id="ref-for-propdef-inset-before①">inset-before</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-end" id="ref-for-propdef-inset-end①">inset-end</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-inset-start" id="ref-for-propdef-inset-start①">inset-start</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-left" id="ref-for-propdef-left④③">left</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-position" id="ref-for-propdef-position①⑥">position</a>
      <td>static | relative | absolute | sticky | fixed
      <td>static
      <td>all elements except table-column-group and table-column
      <td>no
      <td>N/A
      <td>no
      <td>discrete
      <td>per grammar
      <td>specified keyword
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-right" id="ref-for-propdef-right④④">right</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-top" id="ref-for-propdef-top③⑥">top</a>
      <td>auto | &lt;length-percentage>
      <td>auto
      <td>positioned elements
      <td>no
      <td>refer to height of containing block
      <td>
      <td>length or percentage
by computed value type
      <td>per grammar
      <td>the keyword auto or a computed &lt;length-percentage> value
     <tr>
      <th scope="row"><a class="css" data-link-type="property" href="#propdef-z-index" id="ref-for-propdef-z-index⑤">z-index</a>
      <td>auto | &lt;integer>
      <td>auto
      <td>positioned elements
      <td>no
      <td>N/A
      <td>&lt;integer>
      <td>by computed value
      <td>per grammar
      <td>the keyword auto or an integer
   </table>
  </div>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span><a class="self-link" href="#issues-index"></a></h2>
  <div style="counter-reset:issue">
   <div class="issue"> Describe which element font-size-relative units are resolved against <a href="#issue-86601ab4"> ↵ </a></div>
   <div class="issue"> Say what happens if this rectangle is empty <a href="#issue-6be9cee7"> ↵ </a></div>
   <div class="issue"> Say what happens if it already overflows the containing block <a href="#issue-09e98f99"> ↵ </a></div>
   <div class="issue"> Do margins collapse between the stickily positioned element and its containing
    block element?
    More generally, what margin is this referring to?
    Does it involve collapsing between the sticky element and
    its descendants, siblings, and/or ancestors? <a href="#issue-sticky-margin-collapsing"> ↵ </a></div>
   <div class="issue"> Does the margin on the stickily positioned element affect its distance from
    the flow root edge? <a href="#issue-d0f08323"> ↵ </a></div>
   <div class="issue"> Sticky positioning should really be defined in terms of the nearest scrollable
    ancestor, but there is currently no such term defined elsewhere in CSS. CSSOM
    View refers to "scrolling boxes." CSS Overflow has yet to pull in the relevant
    text from CSS Box, and CSS Box has an old, confusing definition of "flow root"
    which is almost (but probably not quite) what we want here. This spec refers
    to "flow root," since that’s the closest thing currently specced somewhere,
    but this is not optimal. <a href="#issue-633057ae"> ↵ </a></div>
   <div class="issue"> See <a data-link-type="biblio" href="#biblio-css-logical-1">[CSS-LOGICAL-1]</a>; this section is not up-to-date.<a href="#issue-e992d10f"> ↵ </a></div>
   <div class="issue">The logical property definitions should move to the Logical Properties module.<a href="#issue-f0660eeb"> ↵ </a></div>
   <div class="issue">This needs to be defined for sticky positioning.<a href="#issue-40a62b16"> ↵ </a></div>
   <div class="issue"> Ideas have been raised to allow changing the positioning containing block or
    allowing positioning and sizing to use different containing blocks. <a href="#issue-d3a4d052"> ↵ </a></div>
  </div>
  <aside class="dfn-panel" data-for="viewport">
   <b><a href="#viewport">#viewport</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-viewport">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-viewport①">6.4. 
Fixed positioning</a>
    <li><a href="#ref-for-viewport②">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-viewport③">(2)</a> <a href="#ref-for-viewport④">(3)</a>
    <li><a href="#ref-for-viewport⑤">6.6. 
Box offsets: top, right, bottom, left</a>
    <li><a href="#ref-for-viewport⑥">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
    <li><a href="#ref-for-viewport⑦">12.2. 
Painting order</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="containing-block">
   <b><a href="#containing-block">#containing-block</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-containing-block">6. 
Positioning schemes</a>
    <li><a href="#ref-for-containing-block①">6.1. 
Relative positioning</a> <a href="#ref-for-containing-block②">(2)</a> <a href="#ref-for-containing-block③">(3)</a> <a href="#ref-for-containing-block④">(4)</a>
    <li><a href="#ref-for-containing-block⑤">6.2. 
Sticky positioning</a> <a href="#ref-for-containing-block⑥">(2)</a> <a href="#ref-for-containing-block⑦">(3)</a>
    <li><a href="#ref-for-containing-block⑧">6.3. 
Absolute positioning</a> <a href="#ref-for-containing-block⑨">(2)</a>
    <li><a href="#ref-for-containing-block①⓪">6.4. 
Fixed positioning</a>
    <li><a href="#ref-for-containing-block①①">6.5. 
Choosing a positioning scheme: position property</a>
    <li><a href="#ref-for-containing-block①②">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-containing-block①③">(2)</a> <a href="#ref-for-containing-block①④">(3)</a> <a href="#ref-for-containing-block①⑤">(4)</a> <a href="#ref-for-containing-block①⑥">(5)</a> <a href="#ref-for-containing-block①⑦">(6)</a> <a href="#ref-for-containing-block①⑧">(7)</a> <a href="#ref-for-containing-block①⑨">(8)</a> <a href="#ref-for-containing-block②⓪">(9)</a> <a href="#ref-for-containing-block②①">(10)</a> <a href="#ref-for-containing-block②②">(11)</a> <a href="#ref-for-containing-block②③">(12)</a> <a href="#ref-for-containing-block②④">(13)</a>
    <li><a href="#ref-for-containing-block②⑤">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a> <a href="#ref-for-containing-block②⑥">(2)</a> <a href="#ref-for-containing-block②⑦">(3)</a> <a href="#ref-for-containing-block②⑧">(4)</a>
    <li><a href="#ref-for-containing-block②⑨">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-containing-block③⓪">(2)</a> <a href="#ref-for-containing-block③①">(3)</a>
    <li><a href="#ref-for-containing-block③②">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-containing-block③③">(2)</a> <a href="#ref-for-containing-block③④">(3)</a> <a href="#ref-for-containing-block③⑤">(4)</a>
    <li><a href="#ref-for-containing-block③⑥">9. 
Relationships between display, position, and float</a>
    <li><a href="#ref-for-containing-block③⑦">10.1. 
Normal flow</a>
    <li><a href="#ref-for-containing-block③⑧">10.4. 
Absolute positioning</a> <a href="#ref-for-containing-block③⑨">(2)</a> <a href="#ref-for-containing-block④⓪">(3)</a> <a href="#ref-for-containing-block④①">(4)</a> <a href="#ref-for-containing-block④②">(5)</a> <a href="#ref-for-containing-block④③">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="normal-flow">
   <b><a href="#normal-flow">#normal-flow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-normal-flow">1. 
Introduction</a>
    <li><a href="#ref-for-normal-flow①">6. 
Positioning schemes</a> <a href="#ref-for-normal-flow②">(2)</a>
    <li><a href="#ref-for-normal-flow③">6.1. 
Relative positioning</a> <a href="#ref-for-normal-flow④">(2)</a> <a href="#ref-for-normal-flow⑤">(3)</a>
    <li><a href="#ref-for-normal-flow⑥">6.2. 
Sticky positioning</a> <a href="#ref-for-normal-flow⑦">(2)</a>
    <li><a href="#ref-for-normal-flow⑧">6.3. 
Absolute positioning</a>
    <li><a href="#ref-for-normal-flow⑨">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-normal-flow①⓪">(2)</a> <a href="#ref-for-normal-flow①①">(3)</a> <a href="#ref-for-normal-flow①②">(4)</a> <a href="#ref-for-normal-flow①③">(5)</a>
    <li><a href="#ref-for-normal-flow①④">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-normal-flow①⑤">(2)</a> <a href="#ref-for-normal-flow①⑥">(3)</a> <a href="#ref-for-normal-flow①⑦">(4)</a>
    <li><a href="#ref-for-normal-flow①⑧">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
    <li><a href="#ref-for-normal-flow①⑨">8.2. 
The width of absolute or fixed positioned, replaced elements</a>
    <li><a href="#ref-for-normal-flow②⓪">10. 
Comparison of normal flow, floats, and positioning</a> <a href="#ref-for-normal-flow②①">(2)</a>
    <li><a href="#ref-for-normal-flow②②">10.1. 
Normal flow</a>
    <li><a href="#ref-for-normal-flow②③">10.2. 
Relative positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="float">
   <b><a href="#float">#float</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-float">6. 
Positioning schemes</a> <a href="#ref-for-float①">(2)</a> <a href="#ref-for-float②">(3)</a>
    <li><a href="#ref-for-float③">6.1. 
Relative positioning</a> <a href="#ref-for-float④">(2)</a>
    <li><a href="#ref-for-float⑤">6.2. 
Sticky positioning</a>
    <li><a href="#ref-for-float⑥">8.5. 
Auto heights for block formatting context roots</a> <a href="#ref-for-float⑦">(2)</a> <a href="#ref-for-float⑧">(3)</a>
    <li><a href="#ref-for-float⑨">9. 
Relationships between display, position, and float</a>
    <li><a href="#ref-for-float①⓪">10. 
Comparison of normal flow, floats, and positioning</a>
    <li><a href="#ref-for-float①①">10.3. 
Floating a box</a> <a href="#ref-for-float①②">(2)</a>
    <li><a href="#ref-for-float①③">12.2. 
Painting order</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="positioning-schemes">
   <b><a href="#positioning-schemes">#positioning-schemes</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-positioning-schemes">10. 
Comparison of normal flow, floats, and positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="relative-position">
   <b><a href="#relative-position">#relative-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-relative-position">6.2. 
Sticky positioning</a>
    <li><a href="#ref-for-relative-position①">6.5. 
Choosing a positioning scheme: position property</a>
    <li><a href="#ref-for-relative-position②">10. 
Comparison of normal flow, floats, and positioning</a>
    <li><a href="#ref-for-relative-position③">10.2. 
Relative positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="sticky-position">
   <b><a href="#sticky-position">#sticky-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sticky-position">6. 
Positioning schemes</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-position">
   <b><a href="#propdef-position">#propdef-position</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-position">3.1. 
Definition of containing block</a> <a href="#ref-for-propdef-position①">(2)</a> <a href="#ref-for-propdef-position②">(3)</a>
    <li><a href="#ref-for-propdef-position③">6.3. 
Absolute positioning</a>
    <li><a href="#ref-for-propdef-position④">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-propdef-position⑤">(2)</a> <a href="#ref-for-propdef-position⑥">(3)</a> <a href="#ref-for-propdef-position⑦">(4)</a> <a href="#ref-for-propdef-position⑧">(5)</a> <a href="#ref-for-propdef-position⑨">(6)</a>
    <li><a href="#ref-for-propdef-position①⓪">6.6. 
Box offsets: top, right, bottom, left</a>
    <li><a href="#ref-for-propdef-position①①">9. 
Relationships between display, position, and float</a> <a href="#ref-for-propdef-position①②">(2)</a> <a href="#ref-for-propdef-position①③">(3)</a> <a href="#ref-for-propdef-position①④">(4)</a>
    <li><a href="#ref-for-propdef-position①⑤">10.4. 
Absolute positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-position-static">
   <b><a href="#valdef-position-static">#valdef-position-static</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-static">3.1. 
Definition of containing block</a> <a href="#ref-for-valdef-position-static①">(2)</a>
    <li><a href="#ref-for-valdef-position-static②">6.5. 
Choosing a positioning scheme: position property</a>
    <li><a href="#ref-for-valdef-position-static③">6.6. 
Box offsets: top, right, bottom, left</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-position-relative">
   <b><a href="#valdef-position-relative">#valdef-position-relative</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-relative">3.1. 
Definition of containing block</a> <a href="#ref-for-valdef-position-relative①">(2)</a>
    <li><a href="#ref-for-valdef-position-relative②">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-valdef-position-relative③">(2)</a>
    <li><a href="#ref-for-valdef-position-relative④">10.4. 
Absolute positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-position-absolute">
   <b><a href="#valdef-position-absolute">#valdef-position-absolute</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-absolute">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-valdef-position-absolute①">6.3. 
Absolute positioning</a>
    <li><a href="#ref-for-valdef-position-absolute②">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-position-sticky">
   <b><a href="#valdef-position-sticky">#valdef-position-sticky</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-sticky">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-valdef-position-sticky①">6.5. 
Choosing a positioning scheme: position property</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-position-fixed">
   <b><a href="#valdef-position-fixed">#valdef-position-fixed</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-position-fixed">3.1. 
Definition of containing block</a>
    <li><a href="#ref-for-valdef-position-fixed①">6.3. 
Absolute positioning</a>
    <li><a href="#ref-for-valdef-position-fixed②">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-valdef-position-fixed③">(2)</a> <a href="#ref-for-valdef-position-fixed④">(3)</a>
    <li><a href="#ref-for-valdef-position-fixed⑤">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-top">
   <b><a href="#propdef-top">#propdef-top</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-top">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-top①">(2)</a> <a href="#ref-for-propdef-top②">(3)</a> <a href="#ref-for-propdef-top③">(4)</a> <a href="#ref-for-propdef-top④">(5)</a> <a href="#ref-for-propdef-top⑤">(6)</a> <a href="#ref-for-propdef-top⑥">(7)</a>
    <li><a href="#ref-for-propdef-top⑦">6.2. 
Sticky positioning</a> <a href="#ref-for-propdef-top⑧">(2)</a> <a href="#ref-for-propdef-top⑨">(3)</a> <a href="#ref-for-propdef-top①⓪">(4)</a> <a href="#ref-for-propdef-top①①">(5)</a>
    <li><a href="#ref-for-propdef-top①②">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-propdef-top①③">(2)</a>
    <li><a href="#ref-for-propdef-top①④">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-top①⑤">(2)</a> <a href="#ref-for-propdef-top①⑥">(3)</a> <a href="#ref-for-propdef-top①⑦">(4)</a> <a href="#ref-for-propdef-top①⑧">(5)</a> <a href="#ref-for-propdef-top①⑨">(6)</a>
    <li><a href="#ref-for-propdef-top②⓪">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-top②①">(2)</a> <a href="#ref-for-propdef-top②②">(3)</a> <a href="#ref-for-propdef-top②③">(4)</a> <a href="#ref-for-propdef-top②④">(5)</a> <a href="#ref-for-propdef-top②⑤">(6)</a> <a href="#ref-for-propdef-top②⑥">(7)</a> <a href="#ref-for-propdef-top②⑦">(8)</a> <a href="#ref-for-propdef-top②⑧">(9)</a> <a href="#ref-for-propdef-top②⑨">(10)</a> <a href="#ref-for-propdef-top③⓪">(11)</a> <a href="#ref-for-propdef-top③①">(12)</a>
    <li><a href="#ref-for-propdef-top③②">8.4. 
The height of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-top③③">(2)</a>
    <li><a href="#ref-for-propdef-top③④">9. 
Relationships between display, position, and float</a>
    <li><a href="#ref-for-propdef-top③⑤">10.4. 
Absolute positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-right">
   <b><a href="#propdef-right">#propdef-right</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-right">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-right①">(2)</a> <a href="#ref-for-propdef-right②">(3)</a> <a href="#ref-for-propdef-right③">(4)</a> <a href="#ref-for-propdef-right④">(5)</a> <a href="#ref-for-propdef-right⑤">(6)</a> <a href="#ref-for-propdef-right⑥">(7)</a> <a href="#ref-for-propdef-right⑦">(8)</a> <a href="#ref-for-propdef-right⑧">(9)</a> <a href="#ref-for-propdef-right⑨">(10)</a>
    <li><a href="#ref-for-propdef-right①⓪">6.2. 
Sticky positioning</a> <a href="#ref-for-propdef-right①①">(2)</a> <a href="#ref-for-propdef-right①②">(3)</a> <a href="#ref-for-propdef-right①③">(4)</a>
    <li><a href="#ref-for-propdef-right①④">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-propdef-right①⑤">(2)</a>
    <li><a href="#ref-for-propdef-right①⑥">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-right①⑦">(2)</a> <a href="#ref-for-propdef-right①⑧">(3)</a>
    <li><a href="#ref-for-propdef-right①⑨">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-right②⓪">(2)</a> <a href="#ref-for-propdef-right②①">(3)</a> <a href="#ref-for-propdef-right②②">(4)</a> <a href="#ref-for-propdef-right②③">(5)</a> <a href="#ref-for-propdef-right②④">(6)</a> <a href="#ref-for-propdef-right②⑤">(7)</a> <a href="#ref-for-propdef-right②⑥">(8)</a> <a href="#ref-for-propdef-right②⑦">(9)</a> <a href="#ref-for-propdef-right②⑧">(10)</a> <a href="#ref-for-propdef-right②⑨">(11)</a> <a href="#ref-for-propdef-right③⓪">(12)</a> <a href="#ref-for-propdef-right③①">(13)</a> <a href="#ref-for-propdef-right③②">(14)</a> <a href="#ref-for-propdef-right③③">(15)</a> <a href="#ref-for-propdef-right③④">(16)</a>
    <li><a href="#ref-for-propdef-right③⑤">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-right③⑥">(2)</a> <a href="#ref-for-propdef-right③⑦">(3)</a> <a href="#ref-for-propdef-right③⑧">(4)</a> <a href="#ref-for-propdef-right③⑨">(5)</a> <a href="#ref-for-propdef-right④⓪">(6)</a> <a href="#ref-for-propdef-right④①">(7)</a>
    <li><a href="#ref-for-propdef-right④②">9. 
Relationships between display, position, and float</a>
    <li><a href="#ref-for-propdef-right④③">10.3. 
Floating a box</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-bottom">
   <b><a href="#propdef-bottom">#propdef-bottom</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-bottom">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-bottom①">(2)</a> <a href="#ref-for-propdef-bottom②">(3)</a> <a href="#ref-for-propdef-bottom③">(4)</a> <a href="#ref-for-propdef-bottom④">(5)</a> <a href="#ref-for-propdef-bottom⑤">(6)</a> <a href="#ref-for-propdef-bottom⑥">(7)</a> <a href="#ref-for-propdef-bottom⑦">(8)</a>
    <li><a href="#ref-for-propdef-bottom⑧">6.2. 
Sticky positioning</a> <a href="#ref-for-propdef-bottom⑨">(2)</a> <a href="#ref-for-propdef-bottom①⓪">(3)</a> <a href="#ref-for-propdef-bottom①①">(4)</a> <a href="#ref-for-propdef-bottom①②">(5)</a>
    <li><a href="#ref-for-propdef-bottom①③">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-propdef-bottom①④">(2)</a>
    <li><a href="#ref-for-propdef-bottom①⑤">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-bottom①⑥">(2)</a> <a href="#ref-for-propdef-bottom①⑦">(3)</a>
    <li><a href="#ref-for-propdef-bottom①⑧">8.3. 
The height of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-bottom①⑨">(2)</a> <a href="#ref-for-propdef-bottom②⓪">(3)</a> <a href="#ref-for-propdef-bottom②①">(4)</a> <a href="#ref-for-propdef-bottom②②">(5)</a> <a href="#ref-for-propdef-bottom②③">(6)</a> <a href="#ref-for-propdef-bottom②④">(7)</a> <a href="#ref-for-propdef-bottom②⑤">(8)</a> <a href="#ref-for-propdef-bottom②⑥">(9)</a> <a href="#ref-for-propdef-bottom②⑦">(10)</a> <a href="#ref-for-propdef-bottom②⑧">(11)</a> <a href="#ref-for-propdef-bottom②⑨">(12)</a>
    <li><a href="#ref-for-propdef-bottom③⓪">8.4. 
The height of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-bottom③①">(2)</a> <a href="#ref-for-propdef-bottom③②">(3)</a>
    <li><a href="#ref-for-propdef-bottom③③">9. 
Relationships between display, position, and float</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-left">
   <b><a href="#propdef-left">#propdef-left</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-left">6.1. 
Relative positioning</a> <a href="#ref-for-propdef-left①">(2)</a> <a href="#ref-for-propdef-left②">(3)</a> <a href="#ref-for-propdef-left③">(4)</a> <a href="#ref-for-propdef-left④">(5)</a> <a href="#ref-for-propdef-left⑤">(6)</a> <a href="#ref-for-propdef-left⑥">(7)</a> <a href="#ref-for-propdef-left⑦">(8)</a> <a href="#ref-for-propdef-left⑧">(9)</a> <a href="#ref-for-propdef-left⑨">(10)</a>
    <li><a href="#ref-for-propdef-left①⓪">6.2. 
Sticky positioning</a> <a href="#ref-for-propdef-left①①">(2)</a> <a href="#ref-for-propdef-left①②">(3)</a> <a href="#ref-for-propdef-left①③">(4)</a>
    <li><a href="#ref-for-propdef-left①④">6.5. 
Choosing a positioning scheme: position property</a> <a href="#ref-for-propdef-left①⑤">(2)</a>
    <li><a href="#ref-for-propdef-left①⑥">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-propdef-left①⑦">(2)</a> <a href="#ref-for-propdef-left①⑧">(3)</a>
    <li><a href="#ref-for-propdef-left①⑨">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-propdef-left②⓪">(2)</a> <a href="#ref-for-propdef-left②①">(3)</a> <a href="#ref-for-propdef-left②②">(4)</a> <a href="#ref-for-propdef-left②③">(5)</a> <a href="#ref-for-propdef-left②④">(6)</a> <a href="#ref-for-propdef-left②⑤">(7)</a> <a href="#ref-for-propdef-left②⑥">(8)</a> <a href="#ref-for-propdef-left②⑦">(9)</a> <a href="#ref-for-propdef-left②⑧">(10)</a> <a href="#ref-for-propdef-left②⑨">(11)</a> <a href="#ref-for-propdef-left③⓪">(12)</a> <a href="#ref-for-propdef-left③①">(13)</a> <a href="#ref-for-propdef-left③②">(14)</a> <a href="#ref-for-propdef-left③③">(15)</a>
    <li><a href="#ref-for-propdef-left③④">8.2. 
The width of absolute or fixed positioned, replaced elements</a> <a href="#ref-for-propdef-left③⑤">(2)</a> <a href="#ref-for-propdef-left③⑥">(3)</a> <a href="#ref-for-propdef-left③⑦">(4)</a> <a href="#ref-for-propdef-left③⑧">(5)</a> <a href="#ref-for-propdef-left③⑨">(6)</a> <a href="#ref-for-propdef-left④⓪">(7)</a>
    <li><a href="#ref-for-propdef-left④①">9. 
Relationships between display, position, and float</a>
    <li><a href="#ref-for-propdef-left④②">10.4. 
Absolute positioning</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-top-auto">
   <b><a href="#valdef-top-auto">#valdef-top-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-top-auto">6.6. 
Box offsets: top, right, bottom, left</a> <a href="#ref-for-valdef-top-auto①">(2)</a> <a href="#ref-for-valdef-top-auto②">(3)</a> <a href="#ref-for-valdef-top-auto③">(4)</a> <a href="#ref-for-valdef-top-auto④">(5)</a>
    <li><a href="#ref-for-valdef-top-auto⑤">8.1. 
The width of absolute or fixed positioned, non-replaced elements</a> <a href="#ref-for-valdef-top-auto⑥">(2)</a> <a href="#ref-for-valdef-top-auto⑦">(3)</a> <a href="#ref-for-valdef-top-auto⑧">(4)</a> <a href="#ref-for-valdef-top-auto⑨">(5)</a> <a href="#ref-for-valdef-top-auto①⓪">(6)</a> <a href="#ref-for-valdef-top-auto①①">(7)</a> <a href="#ref-for-valdef-top-auto①②">(8)</a> <a href="#ref-for-valdef-top-auto①③">(9)</a> <a href="#ref-for-valdef-top-auto①④">(10)</a> <a href="#ref-for-valdef-top-auto①⑤">(11)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-before">
   <b><a href="#propdef-inset-before">#propdef-inset-before</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-before">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-after">
   <b><a href="#propdef-inset-after">#propdef-inset-after</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-after">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-start">
   <b><a href="#propdef-inset-start">#propdef-inset-start</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-start">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-inset-end">
   <b><a href="#propdef-inset-end">#propdef-inset-end</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-inset-end">6.7. 
Logical box insets: inset-before, inset-end, inset-after and inset-start</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="propdef-z-index">
   <b><a href="#propdef-z-index">#propdef-z-index</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-propdef-z-index">11. 
Layered presentation</a> <a href="#ref-for-propdef-z-index①">(2)</a> <a href="#ref-for-propdef-z-index②">(3)</a> <a href="#ref-for-propdef-z-index③">(4)</a>
    <li><a href="#ref-for-propdef-z-index④">12.2. 
Painting order</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="valdef-z-index-auto">
   <b><a href="#valdef-z-index-auto">#valdef-z-index-auto</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-valdef-z-index-auto">11. 
Layered presentation</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>